diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp')
13 files changed, 168 insertions, 132 deletions
diff --git a/sdnr/wt/odlux/apps/networkMapApp/package.json b/sdnr/wt/odlux/apps/networkMapApp/package.json index b1150c37c..7119f1b38 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/package.json +++ b/sdnr/wt/odlux/apps/networkMapApp/package.json @@ -1,5 +1,5 @@ { - "name": "@odlux/networkmap-app", + "name": "@odlux/transport-app", "version": "0.1.0", "description": "A react based modular UI to display event log from a database.", "main": "index.js", diff --git a/sdnr/wt/odlux/apps/networkMapApp/pom.xml b/sdnr/wt/odlux/apps/networkMapApp/pom.xml index 4738c29ff..1b1b83a83 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/pom.xml +++ b/sdnr/wt/odlux/apps/networkMapApp/pom.xml @@ -26,7 +26,7 @@ <parent> <groupId>org.onap.ccsdk.parent</groupId> <artifactId>odlparent</artifactId> - <version>2.1.0</version> + <version>2.1.1-SNAPSHOT</version> <relativePath/> </parent> @@ -45,7 +45,6 @@ <properties> <maven.javadoc.skip>true</maven.javadoc.skip> - <checkstyle.skip>true</checkstyle.skip> </properties> <dependencies> diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts b/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts index 889480dff..8fcdc4c3b 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts @@ -42,7 +42,7 @@ export const verifyResponse = (response: Response) =>{ } } -export const setTopologyReachableAction = (error: Error) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{ +export const handleConnectionError = (error: Error) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{ const {network:{connectivity: {isToplogyServerAvailable}}} = getState(); if(isToplogyServerAvailable){ dispatcher(new IsTopologyServerReachableAction(false)) diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx index 72fe79ee3..7e378b81e 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx @@ -26,85 +26,101 @@ import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import { makeStyles, Button, Tooltip } from '@material-ui/core'; -type props = { headers: string[], height:number, navigate?(applicationName: string, path?: string):void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabel: string, onClick?(id: string): void, actions?:boolean }; +type props = { headers: string[], height: number, navigate?(applicationName: string, path?: string): void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabelRow: string, ariaLabelColumn: string[], verticalTable?: boolean, onClick?(id: string): void, actions?: boolean }; const styles = makeStyles({ container: { - overflow:"auto" + overflow: "auto" }, button: { margin: 0, padding: "6px 6px", minWidth: 'unset' - } - - }); - + } + +}); + const DenseTable: React.FunctionComponent<props> = (props) => { const classes = styles(); - const handleClick = (event: any, id: string) =>{ + const handleClick = (event: any, id: string) => { event.preventDefault(); props.onClick !== undefined && props.onClick(id); } - const handleHover = (event: any, id: string) =>{ + const handleHover = (event: any, id: string) => { event.preventDefault(); } return ( - <Paper style={{borderRadius:"0px"}}> - <div style={{ height:props.height, overflow:"auto"}}> - <Table stickyHeader size="small" aria-label="a dense table" > - <TableHead> - <TableRow> - { - props.headers.map((data) => { - return <TableCell>{data}</TableCell> - }) + <Paper style={{ borderRadius: "0px" }}> + <div style={{ height: props.height, overflow: "auto" }}> + <Table stickyHeader size="small" aria-label="a dense table" > + <TableHead> + <TableRow> + { + props.headers.map((data) => { + return <TableCell>{data}</TableCell> + }) + } + </TableRow> + </TableHead> + <TableBody> + {props.data.map((row, index) => { + var values = Object.keys(row).map(function (e) { return row[e]; }); + return ( + <TableRow aria-label={props.ariaLabelRow} key={index} hover={props.hover} onMouseOver={e => handleHover(e, row.name)} onClick={e => handleClick(e, row.name)}> + + { + values.map((data: any, i) => { + if (data !== undefined) { + + if (!props.verticalTable) { + const ariaLabel = props.ariaLabelColumn[i]; + if (ariaLabel.length > 0) { + return <TableCell aria-label={ariaLabel}>{data}</TableCell> + } else { + return <TableCell>{data}</TableCell> + } + } + else { + // skip adding aria label to 'header' column + if (i === 0) { + return <TableCell>{data}</TableCell> + } else { + const ariaLabel = props.ariaLabelColumn[index]; + return <TableCell aria-label={ariaLabel}>{data}</TableCell> + } + } + } + else + return null; + }) + } + { + + props.actions && <TableCell > + <div style={{ display: "flex" }}> + <Tooltip title="Configure"> + <Button className={classes.button} disabled={row.status !== "connected"} onClick={(e: any) => { e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.simulatorId ? row.simulatorId : row.name) }}>C</Button> + </Tooltip> + <Tooltip title="Fault"> + <Button className={classes.button} disabled={row.status !== "connected"} onClick={(e: any) => { e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.simulatorId ? row.simulatorId : row.name) }}>F</Button> + </Tooltip> + </div> + </TableCell> + } + </TableRow>) + }) } - </TableRow> - </TableHead> - <TableBody> - {props.data.map((row, index) => { - var values = Object.keys(row).map(function(e) { return row[e] }); - return ( - <TableRow aria-label={props.ariaLabel} key={index} hover={props.hover} onMouseOver={e => handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}> - - { - values.map((data:any) => { - - if(data!== undefined) - return <TableCell> {data} </TableCell> - else - return null; - }) - } - { - - props.actions && <TableCell > -<div style={{display:"flex"}}> - <Tooltip title="Configure"> - <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.name)}}>C</Button> - </Tooltip> - <Tooltip title="Fault"> - <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.name)}}>F</Button> - </Tooltip> - </div> - </TableCell> - - } - </TableRow>) - }) - } - - </TableBody> - </Table> + + </TableBody> + </Table> </div> </Paper> ); 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 a8f73f35c..81f9bba90 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx @@ -90,7 +90,7 @@ const LinkDetails: React.FunctionComponent<props> = (props) => { <AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}> <Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography> </AppBar> - <DenseTable ariaLabel="site-information-table-entry" height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} /> + <DenseTable ariaLabelRow="site-information-table-entry" ariaLabelColumn={["site-name", "latitude", "longitude", "azimuth"]} verticalTable height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} /> { props.link.type==="microwave" && <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onCalculateLinkClick}>Calculate link</Button> } 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 613166116..5e617be2d 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx @@ -119,7 +119,7 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { { props.site.links.length > 0 && - <DenseTable ariaLabel="available-links-table-entry" 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={["Link Name", "Azimuth in °"]} data={linkRows} onClick={props.onLinkClick} ></DenseTable> /** * * */ @@ -140,7 +140,7 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { { props.site.devices.length>0 && props.updatedDevices !== null && - <DenseTable ariaLabel="available-nodes-table-entry" navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} /> + <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!} /> } </> } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx index b6e1d9cd6..e2935f6b7 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx @@ -33,9 +33,13 @@ import { addDistance, getUniqueFeatures, increaseBoundingBox } from '../utils/ma import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; import SearchBar from './searchBar'; -import { verifyResponse, setTopologyReachableAction, setTileServerReachableAction } from '../actions/connectivityAction'; +import { verifyResponse, IsTileServerReachableAction, handleConnectionError, setTileServerReachableAction } from '../actions/connectivityAction'; import ConnectionInfo from './connectionInfo' import { showIconLayers, addBaseLayers, addBaseSources, addIconLayers } from '../utils/mapLayers'; +import lamp from '../../icons/lamp.png'; +import apartment from '../../icons/apartment.png'; +import datacenter from '../../icons/datacenter.png'; +import factory from '../../icons/factory.png'; import Statistics from './statistics'; import IconSwitch from './iconSwitch'; import { addImages } from '../services/mapImagesService'; @@ -112,6 +116,9 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { map.on('load', (ev) => { map.setMaxZoom(18); + const bbox = map.getBounds(); + this.props.updateMapPosition(bbox.getCenter().lat, bbox.getCenter().lng, map.getZoom()) + addBaseSources(map, this.props.selectedSite, this.props.selectedLink); addImages(map, (result: boolean)=>{ @@ -123,10 +130,9 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { } }); - const boundingBox = map.getBounds(); - + const boundingBox = increaseBoundingBox(map); - fetch(`${URL_API}/links/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) + fetch(`${URL_API}/links/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`) .then(result => verifyResponse(result)) .then(result => result.json()) .then(features => { @@ -137,7 +143,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { .catch(error => this.props.handleConnectionError(error)); - fetch(`${URL_API}/sites/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) + fetch(`${URL_API}/sites/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`) .then(result => verifyResponse(result)) .then(result => result.json()) .then(features => { @@ -380,6 +386,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { componentWillUnmount(){ window.removeEventListener("menu-resized", this.handleResize); + lastBoundingBox=null; } handleResize = () => { @@ -582,7 +589,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({ updateMapPosition: (lat: number, lon: number, zoom: number) => dispatcher.dispatch(new SetCoordinatesAction(lat, lon, zoom)), setStatistics: (linkCount: string, siteCount: string) => dispatcher.dispatch(new SetStatistics(siteCount, linkCount)), setTileServerLoaded: (reachable: boolean) => dispatcher.dispatch(setTileServerReachableAction(reachable)), - handleConnectionError: (error: Error) => dispatcher.dispatch(setTopologyReachableAction(error)) + handleConnectionError: (error: Error) => dispatcher.dispatch(handleConnectionError(error)) }) export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Map));
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx index cdc77b217..040024760 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx @@ -25,7 +25,7 @@ import { URL_API } from '../config'; import { HighlightLinkAction, HighlightSiteAction } from '../actions/mapActions'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; -import { verifyResponse, setTopologyReachableAction } from '../actions/connectivityAction'; +import { verifyResponse, handleConnectionError } from '../actions/connectivityAction'; @@ -86,7 +86,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({ clearDetailsHistory:()=> dispatcher.dispatch(new ClearHistoryAction()), highlightLink: (link: link) => dispatcher.dispatch(new HighlightLinkAction(link)), highlightSite: (site: site) => dispatcher.dispatch(new HighlightSiteAction(site)), - handleConnectionError: (error:Error) => dispatcher.dispatch(setTopologyReachableAction(error)), + handleConnectionError: (error:Error) => dispatcher.dispatch(handleConnectionError(error)), clearDetails: () => dispatcher.dispatch(new ClearDetailsAction()), }); diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts index 6f6277347..5c1c6d285 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts @@ -39,8 +39,8 @@ const initialState: mapState ={ selectedSite: null, zoomToElement: null, alarmlement: null, - lat: 52, - lon: 13, + lat: 52.5095, + lon: 13.3290, zoom: 10, statistics:{links:"Not counted yet.", sites: "Not counted yet."}, allowIconSwitch: true diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx index 67c75cecf..3ce435f9b 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx @@ -71,15 +71,14 @@ subscribe<ObjectNotification & IFormatedMessage>(["ObjectCreationNotification", //store && store.dispatch(UpdateDetailsView(msg.nodeName)) })); - +*/ subscribe<FaultAlarmNotification & IFormatedMessage>("ProblemNotification", (fault => { const store = applicationApi && applicationApi.applicationStore; if (fault && store) { - // store.dispatch(findSiteToAlarm(fault.nodeName)); + store.dispatch(findSiteToAlarm(fault.nodeName)); } })); -*/
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts index c414b15c9..30714b82a 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts @@ -21,11 +21,23 @@ import apartment from '../../icons/apartment.png'; import datacenter from '../../icons/datacenter.png'; import factory from '../../icons/factory.png'; import lamp from '../../icons/lamp.png'; +import datacenterred from '../../icons/datacenterred.png'; +import factoryred from '../../icons/factoryred.png'; +import lampred from '../../icons/lampred.png'; + type ImagesLoaded = (allImagesLoaded: boolean) => void; type MapImages = {name: string, url: string} -export const Images : MapImages[] = [{name: 'data-center', url: datacenter}, {name: 'house', url: apartment}, {name: 'factory', url: factory},{name: 'lamp', url: lamp}] ; +export const Images : MapImages[] = [ + {name: 'data-center', url: datacenter}, + {name: 'house', url: apartment}, + {name: 'factory', url: factory}, + {name: 'lamp', url: lamp}, + {name: 'data-center-red', url: datacenterred}, + {name: 'factory-red', url: factoryred}, + {name: 'lamp-red', url: lampred}, +] ; export const addImages = (map: mapboxgl.Map, callback?: ImagesLoaded) =>{ diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts index b54212e5c..1d4aa89ad 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts @@ -168,6 +168,57 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{ } }); + //select layers + + map.addLayer({ + 'id': 'select-point-lamps', + 'type': 'symbol', + 'source': 'selectedPoints', + 'layout': { + 'icon-allow-overlap': true, + 'icon-image': 'lamp', + 'icon-size': 0.15 + + }, + 'filter': ['==', 'type', 'street lamp'], + }); + + map.addLayer({ + 'id': 'select-point-buildings', + 'type': 'symbol', + 'source': 'selectedPoints', + 'filter': ['==', 'type', 'high rise building'], + 'layout': { + 'icon-allow-overlap': true, + 'icon-image': 'house', + 'icon-size': 0.15 + } + }); + + map.addLayer({ + 'id': 'select-point-data-center', + 'type': 'symbol', + 'source': 'selectedPoints', + 'filter': ['==', 'type', 'data center'], + 'layout': { + 'icon-allow-overlap': true, + 'icon-image': 'data-center', + 'icon-size': 0.15 + } + }); + + map.addLayer({ + 'id': 'select-point-factory', + 'type': 'symbol', + 'source': 'selectedPoints', + 'filter': ['==', 'type', 'factory'], + 'layout': { + 'icon-allow-overlap': true, + 'icon-image': 'factory', + 'icon-size': 0.3 + } + }); + //alarm layers map.addLayer({ @@ -177,7 +228,7 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{ 'layout': { 'icon-allow-overlap': true, 'icon-image': 'lamp-red', - 'icon-size': 0.1 + 'icon-size': 0.15 }, 'filter': createFilter("street lamp"), @@ -191,7 +242,7 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{ 'layout': { 'icon-allow-overlap': true, 'icon-image': 'house-red', - 'icon-size': 0.1 + 'icon-size': 0.15 } }); @@ -202,8 +253,8 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{ 'filter': createFilter("data center"), 'layout': { 'icon-allow-overlap': true, - 'icon-image': 'data-center_red', - 'icon-size': 0.1 + 'icon-image': 'data-center-red', + 'icon-size': 0.15 } }); map.addLayer({ @@ -214,12 +265,10 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{ 'layout': { 'icon-allow-overlap': true, 'icon-image': 'factory-red', - 'icon-size': 0.2 + 'icon-size': 0.3 } }); - - map.addLayer({ id: 'point-remaining', source: 'points', @@ -232,56 +281,6 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{ 'circle-stroke-color': '#fff' } }); - - map.addLayer({ - 'id': 'select-point-lamps', - 'type': 'symbol', - 'source': 'selectedPoints', - 'layout': { - 'icon-allow-overlap': true, - 'icon-image': 'lamp', - 'icon-size': 0.15 - - }, - 'filter': ['==', 'type', 'street lamp'], - }); - - map.addLayer({ - 'id': 'select-point-buildings', - 'type': 'symbol', - 'source': 'selectedPoints', - 'filter': ['==', 'type', 'high rise building'], - 'layout': { - 'icon-allow-overlap': true, - 'icon-image': 'house', - 'icon-size': 0.15 - } - }); - - map.addLayer({ - 'id': 'select-point-data-center', - 'type': 'symbol', - 'source': 'selectedPoints', - 'filter': ['==', 'type', 'data center'], - 'layout': { - 'icon-allow-overlap': true, - 'icon-image': 'data-center', - 'icon-size': 0.15 - } - }); - - - map.addLayer({ - 'id': 'select-point-factory', - 'type': 'symbol', - 'source': 'selectedPoints', - 'filter': ['==', 'type', 'factory'], - 'layout': { - 'icon-allow-overlap': true, - 'icon-image': 'factory', - 'icon-size': 0.3 - } - }); } const addCommonLayers = (map: mapboxgl.Map) =>{ diff --git a/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js b/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js index 5fc67e3ec..7e51f695e 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js @@ -160,6 +160,10 @@ module.exports = (env) => { target: "http://localhost:3001", secure: false }, + "/tiles/": { + target: "http://www.openstreetmap.org", + secure: false + }, "/help/": { target: "http://10.20.6.29:8181", secure: false |