From 0f28ecccb0dbd7c2f39e2c4676e17ca0c38464a2 Mon Sep 17 00:00:00 2001 From: Ravi Pendurty Date: Wed, 3 Feb 2021 16:10:57 +0100 Subject: Migrate odlux Migrate odlux to Aluminium Issue-ID: CCSDK-3136 Signed-off-by: Ravi Pendurty Change-Id: I3200a809a31e87021c95fe103a9c95e03011f503 Signed-off-by: Ravi Pendurty --- sdnr/wt/odlux/apps/networkMapApp/package.json | 2 +- sdnr/wt/odlux/apps/networkMapApp/pom.xml | 3 +- .../src/actions/connectivityAction.ts | 2 +- .../networkMapApp/src/components/denseTable.tsx | 124 ++++++++++++--------- .../src/components/details/linkDetails.tsx | 2 +- .../src/components/details/siteDetails.tsx | 4 +- .../apps/networkMapApp/src/components/map.tsx | 19 +++- .../apps/networkMapApp/src/components/mapPopup.tsx | 4 +- .../apps/networkMapApp/src/handlers/mapReducer.ts | 4 +- .../apps/networkMapApp/src/pluginTransport.tsx | 5 +- .../networkMapApp/src/services/mapImagesService.ts | 14 ++- .../apps/networkMapApp/src/utils/mapLayers.ts | 113 ++++++++++--------- sdnr/wt/odlux/apps/networkMapApp/webpack.config.js | 4 + 13 files changed, 168 insertions(+), 132 deletions(-) (limited to 'sdnr/wt/odlux/apps/networkMapApp') 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 @@ org.onap.ccsdk.parent odlparent - 2.1.0 + 2.1.1-SNAPSHOT @@ -45,7 +45,6 @@ true - true 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) => { 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 ( - -
- - - - { - props.headers.map((data) => { - return {data} - }) + +
+
+ + + { + props.headers.map((data) => { + return {data} + }) + } + + + + {props.data.map((row, index) => { + var values = Object.keys(row).map(function (e) { return row[e]; }); + return ( + 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 {data} + } else { + return {data} + } + } + else { + // skip adding aria label to 'header' column + if (i === 0) { + return {data} + } else { + const ariaLabel = props.ariaLabelColumn[index]; + return {data} + } + } + } + else + return null; + }) + } + { + + props.actions && +
+ + + + + + +
+ + } + ) + }) } - - - - {props.data.map((row, index) => { - var values = Object.keys(row).map(function(e) { return row[e] }); - return ( - handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}> - - { - values.map((data:any) => { - - if(data!== undefined) - return {data} - else - return null; - }) - } - { - - props.actions && -
- - - - - - -
- - - } - ) - }) - } - - -
+ + +
); 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) => { SITE DETAILS - + { props.link.type==="microwave" && } 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.site.links.length > 0 && - + /** * * */ @@ -140,7 +140,7 @@ const SiteDetails: React.FunctionComponent = (props) => { { props.site.devices.length>0 && props.updatedDevices !== null && - + } } 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 { 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 { } }); - 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 { .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 { 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(["ObjectCreationNotification", //store && store.dispatch(UpdateDetailsView(msg.nodeName)) })); - +*/ subscribe("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 -- cgit 1.2.3-korg