Update ODLUX

Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes

Issue-ID: CCSDK-3580
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c

4 files changed, 0 insertions, 856 deletions

diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx
deleted file mode 100644
index 2540b20a7..000000000
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-
-import * as React from 'react'
-
-import connect, { IDispatcher, Connect } from '../../../../../framework/src/flux/connect';
-
-import { Site, Device } from '../../model/site';
-import Typography from '@material-ui/core/Typography';
-import { link } from '../../model/link';
-import { Breadcrumbs, Link, Paper } from '@material-ui/core';
-import SiteDetails from './siteDetails';
-import LinkDetails from './linkDetails';
-import { URL_API, URL_BASEPATH } from '../../config';
-import { SelectSiteAction, SelectLinkAction, AddToHistoryAction, ClearHistoryAction, CheckDeviceList, ClearDetailsAction } from '../../actions/detailsAction';
-import { HistoryEntry } from '../../model/historyEntry';
-import { HighlightLinkAction, HighlightSiteAction, RemoveHighlightingAction } from '../../actions/mapActions';
-import { isSite } from '../../utils/utils';
-import { IApplicationStoreState } from '../../../../../framework/src/store/applicationStore';
-import { NavigateToApplication } from '../../../../../framework/src/actions/navigationActions';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-
-
-const Details: React.FunctionComponent<porps> = (props) => {
-
-    const [message, setMessage] = React.useState("No data selected.");
-
-
-    //on mount
-    React.useEffect(() => {
-        const detailsId = getDetailsIdFromUrl();
-        if (detailsId !== null && props.data?.name !== detailsId) {
-            loadDetailsData(detailsId)
-        }
-
-    }, []);
-
-    // if url changed, load details data
-    React.useEffect(() => {
-        const detailsId = getDetailsIdFromUrl();
-        if (detailsId !== null && props.data?.name !== detailsId) {
-            loadDetailsData(detailsId)
-        }
-        else if(detailsId===null){
-            setMessage("No data selected.");
-            props.clearDetails();
-            props.undoMapSelection();
-        }
-
-    }, [props.location.pathname]);
-
-    //update url if new element loaded
-    React.useEffect(() => {
-        if (props.data !== null) {
-            const currentUrl = window.location.href;
-            const parts = currentUrl.split(URL_BASEPATH);
-            const detailsPath = parts[1].split("/details/");
-            props.history.replace(`/${URL_BASEPATH}${detailsPath[0]}/details/${props.data.name}`)
-        }
-
-    }, [props.data])
-
-    const onLinkClick = async (id: string) => {
-        const result = await fetch(`${URL_API}/links/${id}`);
-        if(result.ok){
-            const resultAsJson = await result.json();
-            const link = resultAsJson as link;
-            props.selectLink(link);
-            props.addHistory({ id: props.data!.name, data: props.data! });
-            props.highlightLink(link);
-
-        }
-    }
-
-    const backClick = (e: any) => {
-        if (isSite(props.breadcrumbs[0].data)) {
-            props.selectSite(props.breadcrumbs[0].data)
-            props.highlightSite(props.breadcrumbs[0].data);
-
-        } else {
-            props.selectLink(props.breadcrumbs[0].data);
-            props.highlightLink(props.breadcrumbs[0].data);
-
-        }
-
-        props.clearHistory();
-        e.preventDefault();
-    }
-
-    const createDetailPanel = (data: Site | link) => {
-        if (isSite(data)) {
-            return <SiteDetails  site={data} onLinkClick={onLinkClick} />
-        } else {
-            return <LinkDetails link={data} />
-        }
-    }
-
-    const getDetailsIdFromUrl = () =>{
-        const currentUrl = window.location.href;
-        const parts = currentUrl.split(URL_BASEPATH);
-        const detailsPath = parts[1].split("/details/")
-        return detailsPath[1] ? detailsPath[1] : null;
-    }
-
-    const loadDetailsData = (id: string) =>{
-
-        fetch(`${URL_API}/links/${id}`)
-                .then(res => {
-                    if (res.ok)
-                        return res.json()
-                    else
-                        return Promise.reject()
-
-                })
-                .then(result => {
-                    props.selectLink(result)
-                    props.highlightLink(result);
-
-                })
-                .catch(error => {
-
-                    fetch(`${URL_API}/sites/name/${id}`)
-                        .then(res => {
-                            if (res.ok)
-                                return res.json()
-                            else return Promise.reject();
-                        })
-                        .then(result => { 
-                            props.selectSite(result); 
-                            props.highlightSite(result);
-                         })
-                        .catch(error =>{
-                            setMessage("No element with name " + id + " found");
-                            props.clearDetails();
-                            props.undoMapSelection();
-                        });
-                })
-    }
-
-    const panelId = props.data!== null ? (isSite(props.data) ? 'site-details-panel' : 'link-details-panel' ): 'details-panel';
-
-    return (<div style={{ width: '30%', background: "#bbbdbf", padding: "20px", alignSelf:"stretch" }}>
-        <Paper style={{ height:"100%"}} id={panelId} aria-label={panelId}  >
-            {
-                props.breadcrumbs.length > 0 &&
-                <Breadcrumbs style={{ marginLeft: "15px", marginTop: "5px" }} aria-label="breadcrumbs-navigation">
-                    <Link aria-label="parent-element" color="inherit" href="/" onClick={backClick}>
-                        {props.breadcrumbs[0].id}
-                    </Link>
-                    <Link aria-label="child-element" color="textSecondary">
-                        {props.data?.name}
-                    </Link>
-                </Breadcrumbs>
-            }
-            {
-                props.data !== null ?
-                    createDetailPanel(props.data)
-                    : <Typography aria-label="details-panel-alt-message" style={{ marginTop: "5px" }} align="center" variant="body1">{message}</Typography>
-
-            }
-        </Paper>
-    </div>)
-}
-
-type porps = RouteComponentProps & Connect<typeof mapStateToProps, typeof mapDispatchToProps>;
-
-//select always via details?
-const mapStateToProps = (state: IApplicationStoreState) => ({
-    data: state.network.details?.data,
-    breadcrumbs: state.network.details.history,
-    updatedDevices: state.network.details.checkedDevices
-});
-
-const mapDispatchToProps = (dispatcher: IDispatcher) => ({
-    selectSite: (site: Site) => dispatcher.dispatch(new SelectSiteAction(site)),
-    selectLink: (link: link) => dispatcher.dispatch(new SelectLinkAction(link)),
-    clearDetails: () => dispatcher.dispatch(new ClearDetailsAction()),
-    addHistory: (newEntry: HistoryEntry) => dispatcher.dispatch(new AddToHistoryAction(newEntry)),
-    clearHistory: () => dispatcher.dispatch(new ClearHistoryAction()),
-    highlightLink: (link: link) => dispatcher.dispatch(new HighlightLinkAction(link)),
-    highlightSite: (site: Site) => dispatcher.dispatch(new HighlightSiteAction(site)),
-    loadDevices: async (networkElements: Device[]) => { await dispatcher.dispatch(CheckDeviceList(networkElements)) },
-    navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path, "test3")),
-    undoMapSelection: () => dispatcher.dispatch(new RemoveHighlightingAction())
-
-})
-
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Details));
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
deleted file mode 100644
index 96727cc0d..000000000
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-
-import * as React from 'react';
-
-import { link } from '../../model/link';
-import { TextField, Tabs, Tab, Typography, AppBar, Button, Link } from '@material-ui/core';
-import DenseTable from '../denseTable';
-import { LatLonToDMS } from '../../utils/mapUtils';
-
-type panelId = "siteA" | "siteB";
-type props = { link: link };
-
-const LinkDetails: React.FunctionComponent<props> = (props) => {
-
-    const [value, setValue] = React.useState<panelId>("siteA");
-    const [height, setHeight] = React.useState(330);
-
-    const handleResize = () =>{
-        const el = document.getElementById('link-details-panel')?.getBoundingClientRect();
-        const el2 = document.getElementById('site-tabs')?.getBoundingClientRect();
-
-        if(el && el2){
-            if(props.link.type==="microwave")
-              setHeight(el!.height - el2!.y -50);
-            else
-              setHeight(el!.height - el2!.y +20);
-
-        }
-    }
-
-    //on mount
-    React.useEffect(()=>{
-        handleResize();
-
-        //window.addEventListener("resize", handleResize);
-    },[]);
-
-    React.useEffect(()=>{
-        handleResize();
-    }, [props.link])
-
-    const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => {
-        setValue(newValue);
-    }
-
-    const onCalculateLinkClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
-       e.preventDefault();
-       const siteA= props.link.locationA;
-       const siteB =props.link.locationB;
-       const nameA = props.link.siteA;
-       const nameB = props.link.siteB;
-       const distance = props.link.length > 0 ? props.link.length : props.link.calculatedLength;
-       const azimuthA = props.link.azimuthA;
-       const azimuthB = props.link.azimuthB;
-       const antennaA = props.link.locationA.antenna;
-       const antennaB = props.link.locationB.antenna;
-
-       
-       let antennaData = "";
-       if(antennaA!==null && antennaB!==null){
-           antennaData = `&antennaNameA=${antennaA.name}&antennaGainA=${antennaA.gain}&waveguideLossA=${antennaA.waveguideLossIndB}&antennaNameB=${antennaB.name}&antennaGainB=${antennaB.gain}&waveguideLossB=${antennaB.waveguideLossIndB}`;
-       }
-       
-
-       
-       const baseUrl = window.location.pathname.split('#')[0];
-       window.open(`${baseUrl}#/linkCalculation?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}&siteA=${nameA}&siteB=${nameB}&azimuthA=${azimuthA}&azimuthB=${azimuthB}&distance=${distance}&amslSiteA=${siteA.amsl}&AGLsiteA=${siteA.antennaHeight}&amslSiteB=${siteB.amsl}&AGLsiteB=${siteB.antennaHeight}${antennaData}`)
-
-    }
-
-    const onLineofSightClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
-        e.preventDefault();
-
-        const siteA= props.link.locationA;
-        const siteB =props.link.locationB;
-
-        //TODO: add check if available
-        let heightPart = `&amslA=${siteA.amsl}&antennaHeightA=${siteA.antennaHeight}&amslB=${siteB.amsl}&antennaHeightB=${siteB.antennaHeight}`;
-        
-
-        const baseUrl = window.location.pathname.split('#')[0];
-        window.open(`${baseUrl}#/lineofsight/los?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}${heightPart}`);
-    }
-
-    const data = [
-
-   {name:"Site Name", val1: props.link.siteA, val2: props.link.siteB},
-    {name:"Latitude", val1: LatLonToDMS(props.link.locationA.lat), val2: LatLonToDMS(props.link.locationB.lat)},
-    {name:"Longitude", val1: LatLonToDMS(props.link.locationA.lon, true), val2: LatLonToDMS(props.link.locationB.lon, true)},
-    props.link.azimuthA!= null && props.link.azimuthB != null && {name:"Azimuth in °", val1: props.link.azimuthA.toFixed(2), val2: props.link.azimuthB.toFixed(2)}
-];
-
-    return (<div style={{ paddingLeft: "15px", paddingRight: "15px", paddingTop: "0px", display: 'flex', flexDirection: 'column' }}>
-        <h2>{props.link.name}</h2>
-        <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>
-        </AppBar>
-        <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> 
-            <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onLineofSightClick}>Line of Sight</Button> 
-            
-            </>
-        }
-    </div>)
-}
-
-export default LinkDetails;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
deleted file mode 100644
index 7f0c1c926..000000000
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-
-import * as React from 'react';
-import { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip } from '@material-ui/core';
-
-
-import MaterialTable, { ColumnModel, ColumnType, MaterialTableCtorType } from "../../../../../framework/src/components/material-table";
-
-
-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';
-import StadokSite from '../../model/stadokSite';
-import { requestRest } from '../../../../../framework/src/services/restService';
-import StadokDetailsPopup from './stadokDetailsPopup';
-
-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 siteDetailProps = {
-    site: Site, 
-    onLinkClick(id: string): void, 
-} & props;
-
-type props =  Connect<typeof mapStateToProps, typeof mapDispatchToProps>;
-
-
-const SiteDetails: React.FunctionComponent<siteDetailProps> = (props) => {
-
-    const [value, setValue] = React.useState<panelId>("links");
-    const [height, setHeight] = React.useState(330);
-    const [openPopup, setOpenPopup] = React.useState(false);
-    const [staSite, setStaSite] = React.useState<StadokSite|null>(null);
-
-    const handleResize = () =>{
-        const el = document.getElementById('site-details-panel')?.getBoundingClientRect();
-        const el2 = document.getElementById('site-tabs')?.getBoundingClientRect();
-
-        if(el && el2){
-            setHeight(el!.height - el2!.y +20);
-        }
-        
-    }
-
-    //on mount
-    React.useEffect(()=>{
-        handleResize();
-
-        window.addEventListener("resize", ()=>{console.log("really got resized.")});
-    },[]);
-
-    // on update
-    React.useEffect(()=>{
-        
-        if(props.site.devices!== null && props.site.devices.length>0){
-            props.initializeDevices(props.site.devices);
-            props.loadDevices(props.site.devices);
-        }
-      
-        handleResize();
-
-    }, [props.site]);
-
-    const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => {
-        setValue(newValue);
-    }
-
-    const getFurtherInformation = (url: string) =>{
-
-        const request = requestRest<StadokSite>(url, { method: "GET"});
-
-        request.then(result =>{
-            if(result){
-                setStaSite(result);
-                setOpenPopup(true);
-            }else{
-                console.error(result);
-            }
-          
-
-        });
-    }
-
-    const closePopup = () =>{
-        setOpenPopup(false);
-    }
-
-    //prepare link table
-
-    let hasAzimuth = false;
-    const linkRows: linkRow[] = props.site.links?.map(link=> 
-        { 
-            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 }}>
-        <h2 >{props.site.name}</h2>
-        {
-            props.site.operator !== '' && props.site.operator !== null ?
-                <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 inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
-        }
-        {
-            adressString !== null && 
-            <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={adressString} label="Address" 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.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.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">
-                <Tab label="Links" value="links" />
-                <Tab label="Nodes" value="nodes" />
-            </Tabs>
-        </AppBar>
-        {
-            value === "links" &&
-            <>
-                {
-                    props.site.links==null &&
-                    <Typography aria-label="no-links-available" variant="body1" style={{ marginTop: '10px' }}>No links available.</Typography>
-                }
-               
-                {
-                    props.site.links?.length > 0 &&
-                    <DenseTable ariaLabelRow="available-links-table" ariaLabelColumn={["link-name", "azimuth"]} height={height} hover={true} headers={linkTableHeader}  data={linkRows} onClick={props.onLinkClick}  ></DenseTable>
-                }
-
-            </>
-
-        }
-        {
-            value === "nodes" &&
-            <>
-                {
-                    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","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!} />
-                }
-            </>
-        }
-        {
-       props.isSitedocReachable && props.site.furtherInformation!==null && props.site.furtherInformation.length>0 &&
-    <Button  style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={e => getFurtherInformation(props.site.furtherInformation) }>Further information available</Button>
-        }
-
-        {
-            staSite !== null && openPopup && <StadokDetailsPopup site={staSite} onClose={closePopup} open={true} />
-        }
-       
-    </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}`
-    }
-
-    
-}
-
-const mapStateToProps = (state: IApplicationStoreState) => ({
-    updatedDevices: state.network.details.checkedDevices,
-    isSitedocReachable: state.network.details.isSitedocReachable
-});
-
-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
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx
deleted file mode 100644
index 4f3235db7..000000000
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2021 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-
-import * as React from 'react';
-
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import { AppBar, Dialog, DialogContent, IconButton, Tab, Tabs, TextField, Typography } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import { withStyles, WithStyles, createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-
-
-import StadokSite from '../../model/stadokSite';
-import { LatLonToDMS } from '../../utils/mapUtils';
-import DenseTable from '../../components/denseTable';
-import { requestRest } from '../../../../../framework/src/services/restService';
-import { OrderToDisplay, StadokOrder } from '../../model/stadokOrder';
-import { CSSProperties } from '@material-ui/core/styles/withStyles';
-import { SITEDOC_URL } from '../../config';
-
-
-type props = { site: StadokSite; onClose(): void; open:boolean };
-
-const styles = (theme: Theme) => createStyles({
-  root: {
-    margin: 0,
-    padding: theme.spacing(2),
-  },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-});
-
-const useStyles = makeStyles({
-  largeImage:{cursor:'pointer', width:300},
-  smallImage:{cursor:'pointer', width: 50, marginTop:'10px', marginLeft:'10px'}
-});
-
-const StadokDetailsPopup: React.FunctionComponent<props> = (props) => {
-  const classes = useStyles();
-
-  const [open, setOpen] = React.useState(props.open);
-  const [value, setValue] = React.useState("devices");
-  const [orders, setOrders] = React.useState<OrderToDisplay[]|null>(null);
-
-  const DialogTitle = withStyles(styles)((props: any) => {
-    const { children, classes, onClose, ...other } = props;
-    return (
-      <MuiDialogTitle disableTypography className={classes.root} {...other}>
-        <Typography variant="h6">{children}</Typography>
-        {onClose ? (
-          <IconButton aria-label="close" style={{position: 'absolute', top:0, right:0, color: 'black'}} onClick={onClose}>
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </MuiDialogTitle>
-    );
-  });
-
-  const getContacts = (site: StadokSite) =>{
-    const contacts = [];
-
-    if(site.createdBy){
-      contacts.push({h: "Site Creator",col1: site.createdBy.firstName, col2: site.createdBy.lastName, col3: site.createdBy.email, col4: site.createdBy.telephoneNumber });
-    }
-  
-    if(site.contacts.manager){
-      contacts.push({h: "Manager",col1: site.contacts.manager.firstName, col2: site.contacts.manager.lastName, col3: site.contacts.manager.email, col4: site.contacts.manager.telephoneNumber });
-    }
-  
-    if(site.contacts.owner){
-      contacts.push({h: "Owner",col1: site.contacts.owner.firstName, col2: site.contacts.owner.lastName, col3: site.contacts.owner.email, col4: site.contacts.owner.telephoneNumber });
-    }
-    return contacts;
-  }
-
-  const onClose = () =>{
-   // setOpen(false);
-     props.onClose()
-  }
-
-  //todo: use a set 'panelId' -> which values are allowed
-  const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: string) => {
-    setValue(newValue);
-}
-console.log(props.site)
-  const contacts = getContacts(props.site);
-  
-  const orderUrl=`${SITEDOC_URL}/site/${props.site.siteId}/orders`;
-
-  if(orders==null){
-    requestRest<StadokOrder[]>(orderUrl,{ method: "GET"}).then(result =>{
-      if(result){
-        const orderList = result.map(order =>{
-          return OrderToDisplay.parse(order);
-        });
-        setOrders(orderList);
-
-      }else{
-        setOrders([]);
-      }
-    });
-  }
-
-  const createOrderInfo = () => {
-
-    if (orders === null) {
-      return (<div style={{ height: 300 }}>
-        <Typography variant="body1" style={{ marginTop: '10px' }}>
-          Loading orders
-        </Typography>
-      </div>)
-    } else if (orders.length === 0) {
-      return (<div style={{ height: 300 }}>
-        <Typography variant="body1" style={{ marginTop: '10px' }}>
-          No orders available
-      </Typography>
-      </div>)
-    } else {
-      return <DenseTable data={orders} height={300} headers={["Person", "State", "Current Task"]} hover={false} ariaLabelRow="activity-log-table" />
-    }
-  }
-
-  const displayImages = () => {
-
-    if (props.site.images.length === 1) {
-      return stadokImage(props.site.siteId, props.site.images[0],"large")
-    } else {
-      return <>
-        {
-          stadokImage(props.site.siteId, props.site.images[0], "large")
-        }
-        <div style={{ display: 'flex', flexDirection: 'row', flexWrap:'wrap' }}>
-
-          {
-            props.site.images.length<=9 ?
-              props.site.images.slice(1, props.site.images.length).map(image =>
-                stadokImage(props.site.siteId, image, "small")
-              )
-              :
-              <>
-              {
-                props.site.images.slice(1, 9).map(image =>
-                  stadokImage(props.site.siteId, image, "small")
-                )
-              }
-              
-              </>
-          }
-        </div>
-      </>
-    }
-
-  }
-
-  const stadokImage = (siteId: string, imagename: string, size: 'large' | 'small') => {
-    const url = `${SITEDOC_URL}/site/${siteId}/files/${imagename}`;
-    const className = size === "small" ? classes.smallImage : classes.largeImage;
-    return <img className={className} src={url} onClick={e => window.open(url)} />
-
-  }
-
-
-  return (<Dialog  onClose={onClose} fullWidth maxWidth="md" aria-labelledby="customized-dialog-title" open={open}>
-    <DialogTitle id="customized-dialog-title" onClose={onClose}>
-      {props.site.siteId}
-    </DialogTitle>
-    <DialogContent style={{minWidth:'900px'}} dividers>
-      <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
-        <div style={{ width: '60%', display:'flex', flexDirection: 'column' }}>
-         
-        <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.updatedOn} label="Updated on" style={{ marginTop: "5px" }} />
-
-         
-          {
-            props.site.type !== undefined && props.site.type.length > 0 &&
-            <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
-          }
-
-
-          <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={`${props.site.address.streetAndNr}, ${props.site.address.zipCode !== null ? props.site.address.zipCode : ''} ${props.site.address.city}`} label="Address" style={{ marginTop: "5px" }} />
-
-
-          <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" variant="scrollable" scrollButtons="on" value={value} onChange={onHandleTabChange} aria-label="simple tabs example">
-                <Tab label="Devices" value="devices" />
-                <Tab label="Contacts" value="contacts" />
-                <Tab label="Saftey" value="safteyInfo" />
-                <Tab label="Logs" value="logs" />
-                <Tab label="Orders" value="orders" />
-            </Tabs>
-        </AppBar>
-        {
-          value == "devices" && (props.site.devices?.length>0 ?
-        <DenseTable data={props.site.devices} height={300} headers={["Device", "Antenna"]} hover={false} ariaLabelRow="devices-table" />
-        :
-        <div style={{height:300}}>
-        <Typography variant="body1" style={{ marginTop: '10px' }}>
-          No devices available
-        </Typography>
-        </div>)
-        }
-        {
-           value == "contacts" && (contacts.length>0 ?
-            <DenseTable data={contacts} height={300} headers={["Person", "Firstname", "Lastname", "Email", "Phone No."]} hover={false} ariaLabelRow="contacts-table" ariaLabelColumn={["person", "firstname", "lastname", "email", "phoneno"]} />
-            :
-            <div style={{height:300}}>
-            <Typography variant="body1" style={{ marginTop: '10px' }}>
-              No contacts available
-            </Typography>
-            </div>)
-        }
-        {
-          value == "safteyInfo" && (props.site.safteyNotices.length>0 ?
-            <DenseTable data={props.site.safteyNotices} height={300} headers={["Note"]} hover={false} ariaLabelRow="saftey-info-table"  />
-            :
-            <div style={{height:300}}>
-            <Typography variant="body1" style={{ marginTop: '10px' }}>
-              No saftey notices applicable
-            </Typography>
-            </div>)
-        }
-        {
-           value == "logs" && (props.site.logs.length>0 ?
-            <DenseTable data={props.site.logs} height={300} headers={["Date","Person", "Activity"]} hover={false} ariaLabelRow="activity-log-table"  />
-            :
-            <div style={{height:300}}>
-            <Typography variant="body1" style={{ marginTop: '10px' }}>
-              No activity log available
-            </Typography>
-            </div>)
-        }
-
-        {
-          value ==="orders" && createOrderInfo()
-        }
-        
-        </div>
-        <div style={{padding: '10px', display: 'flex', alignItems:'center', flexDirection:'column', justifyContent: 'start', width:'40%'}}>
-          {
-            props.site.images.length == 0 ? 
-            <Typography variant="body1" style={{ marginTop: '10px' }}>
-            No images available
-          </Typography>
-          : displayImages()
-          }
-        </div>
-      </div>
-
-    </DialogContent>
-  </Dialog>)
-
-}
-
-export default StadokDetailsPopup;
\ No newline at end of file