diff options
Diffstat (limited to 'sdnr/wt/odlux/apps')
78 files changed, 2044 insertions, 1063 deletions
diff --git a/sdnr/wt/odlux/apps/apiDemo/package.json b/sdnr/wt/odlux/apps/apiDemo/package.json index 3805c020e..af47a025e 100644 --- a/sdnr/wt/odlux/apps/apiDemo/package.json +++ b/sdnr/wt/odlux/apps/apiDemo/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/apiDemo/pom.xml b/sdnr/wt/odlux/apps/apiDemo/pom.xml index 2e9da77fb..6c181cc09 100644 --- a/sdnr/wt/odlux/apps/apiDemo/pom.xml +++ b/sdnr/wt/odlux/apps/apiDemo/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/configurationApp/package.json b/sdnr/wt/odlux/apps/configurationApp/package.json index 16588cd18..8dd2d041f 100644 --- a/sdnr/wt/odlux/apps/configurationApp/package.json +++ b/sdnr/wt/odlux/apps/configurationApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/configurationApp/pom.xml b/sdnr/wt/odlux/apps/configurationApp/pom.xml index bc6bb5da4..43802970f 100644 --- a/sdnr/wt/odlux/apps/configurationApp/pom.xml +++ b/sdnr/wt/odlux/apps/configurationApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts index f80fbfc4d..b5dd310bc 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts @@ -52,26 +52,20 @@ export const updateNodeIdAsyncActionCreator = (nodeId: string) => async (dispatc dispatch(new UpdateDeviceDescription("", {}, [])); dispatch(new SetCollectingSelectionData(true)); - const { avaliableCapabilities, unavaliableCapabilities } = await restService.getCapabilitiesByMoutId(nodeId); - - if (!avaliableCapabilities || avaliableCapabilities.length <= 0) { + const { availableCapabilities, unavailableCapabilities, importOnlyModules } = await restService.getCapabilitiesByMountId(nodeId); + + if (!availableCapabilities || availableCapabilities.length <= 0) { throw new Error(`NetworkElement : [${nodeId}] has no capabilities.`); } - - const capParser = /^\(.*\?revision=(\d{4}-\d{2}-\d{2})\)(\S+)$/i; - - const parser = new YangParser(unavaliableCapabilities?.map(cap => { - const capMatch = cap && capParser.exec(cap.capability); - return { capability:capMatch && capMatch[2] || '', failureReason: cap.failureReason }; - }) || undefined); - - for (let i = 0; i < avaliableCapabilities.length; ++i){ - const capRaw = avaliableCapabilities[i]; - const capMatch = capRaw && capParser.exec(capRaw.capability); + + const parser = new YangParser(unavailableCapabilities || undefined, importOnlyModules || undefined); + + for (let i = 0; i < availableCapabilities.length; ++i){ + const capRaw = availableCapabilities[i]; try { - capMatch && await parser.addCapability(capMatch[2], capMatch[1]); + await parser.addCapability(capRaw.capability, capRaw.version); } catch (err) { - console.error(`Error in ${capMatch && capMatch[2]} ${capMatch && capMatch[1]}`, err); + console.error(`Error in ${capRaw.capability} ${capRaw.version}`, err); } } diff --git a/sdnr/wt/odlux/apps/configurationApp/src/index.html b/sdnr/wt/odlux/apps/configurationApp/src/index.html index 78fff78c5..4a0496bff 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/index.html +++ b/sdnr/wt/odlux/apps/configurationApp/src/index.html @@ -15,11 +15,13 @@ <script type="text/javascript" src="./config.js"></script> <script> // run the application - require(["app", "connectApp", "maintenanceApp", "configurationApp"], function (app, connectApp, maintenanceApp, configurationApp) { + require(["app", "connectApp", "maintenanceApp", "configurationApp", "faultApp"], function (app, connectApp, maintenanceApp, configurationApp, faultApp) { connectApp.register(); configurationApp.register(); maintenanceApp.register(); - app("./app.tsx").configureApplication({ authentication:"oauth", enablePolicy: true,}); + faultApp.register(); + // app("./app.tsx").configureApplication({ authentication:"oauth", enablePolicy: true,}); + app("./app.tsx").configureApplication({ authentication:"basic", enablePolicy: false,}); app("./app.tsx").runApplication(); }); </script> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/models/yang.ts b/sdnr/wt/odlux/apps/configurationApp/src/models/yang.ts index e4ab6f59f..10f538c2e 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/models/yang.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/models/yang.ts @@ -17,12 +17,12 @@ */ import { ViewElement, ViewSpecification } from "./uiModels"; -import { StepLabel } from "@material-ui/core"; export enum ModuleState { stable, instable, - unabaliabe, + importOnly, + unavailable, } export type Token = { diff --git a/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx b/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx index 3bc0e3968..3b9baa657 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx @@ -88,7 +88,7 @@ const ConfigurationApplicationRouteAdapter = connect(undefined, mapDisp)((props: // result += `${indention} [${view.canEdit ? 'rw' : 'ro'}] ${view.ns}:${view.name} ${ds.displayMode === DisplayModeType.displayAsList ? '[LIST]' : ''}\r\n`; result += Object.keys(view.elements).reduce((acc, cur) => { const elm = view.elements[cur]; - acc += `${indention} [${elm.config ? 'rw' : 'ro'}:${elm.id}] (${elm.module}:${elm.label}) {${elm.uiType}} ${elm.uiType === "object" && elm.isList ? `as LIST with KEY [${elm.key}]` : ""}\r\n`; + acc += `${indention} [${elm.uiType === "rpc" ? "x" : elm.config ? 'rw' : 'ro'}:${elm.id}] (${elm.module}:${elm.label}) {${elm.uiType}} ${elm.uiType === "object" && elm.isList ? `as LIST with KEY [${elm.key}]` : ""}\r\n`; // acc += `${indention} +${elm.mandatory ? "mandetory" : "none"} - ${elm.path} \r\n`; switch (elm.uiType) { diff --git a/sdnr/wt/odlux/apps/configurationApp/src/services/restServices.ts b/sdnr/wt/odlux/apps/configurationApp/src/services/restServices.ts index bdef64cf2..02060ef12 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/services/restServices.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/services/restServices.ts @@ -21,52 +21,101 @@ import { convertPropertyNames, replaceHyphen } from "../../../../framework/src/u import { NetworkElementConnection } from "../models/networkElementConnection"; +type ImportOnlyResponse = { + "ietf-yang-library:yang-library": { + "module-set": { + "import-only-module": { + "name": string, + "revision": string, + }[], + }[], + }, +} + + type CapabilityResponse = { - "network-topology:node": { - "node-id": string, - "netconf-node-topology:available-capabilities": { - "available-capability": { - "capability-origin": string, - "capability": string, - }[] - }, - "netconf-node-topology:unavailable-capabilities": { - "unavailable-capability": { - "capability": string, - "failure-reason": string, - }[] - } - }[] + "network-topology:node": { + "node-id": string, + "netconf-node-topology:available-capabilities": { + "available-capability": { + "capability-origin": string, + "capability": string, + }[] + }, + "netconf-node-topology:unavailable-capabilities": { + "unavailable-capability": { + "capability": string, + "failure-reason": string, + }[] + } + }[] } -type CapabilityAnswer = { - avaliableCapabilities: { - capabilityOrigin: string, - capability: string - }[] | null , - unavaliableCapabilities: { - failureReason: string, - capability: string - }[] | null , +type CapabilityAnswer = { + availableCapabilities: { + capabilityOrigin: string, + capability: string, + version: string, + }[] | null, + unavailableCapabilities: { + failureReason: string, + capability: string, + version: string, + }[] | null, + importOnlyModules: { + name: string, + revision: string, + }[] | null } +const capParser = /^\(.*\?revision=(\d{4}-\d{2}-\d{2})\)(\S+)$/i; + class RestService { public getNetworkElementUri = (nodeId: string) => '/rests/data/network-topology:network-topology/topology=topology-netconf/node=' + nodeId; - public async getCapabilitiesByMoutId(nodeId: string): Promise<CapabilityAnswer> { + public async getImportOnlyModules(nodeId: string): Promise<{ name: string, revision: string }[]> { + const path = `${this.getNetworkElementUri(nodeId)}/yang-ext:mount/ietf-yang-library:yang-library?content=nonconfig&fields=module-set(import-only-module(name;revision))`; + const importOnlyResult = await requestRest<ImportOnlyResponse>(path, { method: "GET" }); + const importOnlyModules = importOnlyResult + ? importOnlyResult["ietf-yang-library:yang-library"]["module-set"][0]["import-only-module"] + : []; + return importOnlyModules; + } + + public async getCapabilitiesByMountId(nodeId: string): Promise<CapabilityAnswer> { const path = this.getNetworkElementUri(nodeId); const capabilitiesResult = await requestRest<CapabilityResponse>(path, { method: "GET" }); - const avaliableCapabilities = capabilitiesResult && capabilitiesResult["network-topology:node"] && capabilitiesResult["network-topology:node"].length > 0 && - capabilitiesResult["network-topology:node"][0]["netconf-node-topology:available-capabilities"] && - capabilitiesResult["network-topology:node"][0]["netconf-node-topology:available-capabilities"]["available-capability"] && - capabilitiesResult["network-topology:node"][0]["netconf-node-topology:available-capabilities"]["available-capability"].map<any>(obj => convertPropertyNames(obj, replaceHyphen)) || []; - - const unavaliableCapabilities = capabilitiesResult && capabilitiesResult["network-topology:node"] && capabilitiesResult["network-topology:node"].length > 0 && - capabilitiesResult["network-topology:node"][0]["netconf-node-topology:unavailable-capabilities"] && - capabilitiesResult["network-topology:node"][0]["netconf-node-topology:unavailable-capabilities"]["unavailable-capability"] && - capabilitiesResult["network-topology:node"][0]["netconf-node-topology:unavailable-capabilities"]["unavailable-capability"].map<any>(obj => convertPropertyNames(obj, replaceHyphen)) || [] - - return { avaliableCapabilities, unavaliableCapabilities }; + const availableCapabilities = capabilitiesResult && capabilitiesResult["network-topology:node"] && capabilitiesResult["network-topology:node"].length > 0 && + (capabilitiesResult["network-topology:node"][0]["netconf-node-topology:available-capabilities"] && + capabilitiesResult["network-topology:node"][0]["netconf-node-topology:available-capabilities"]["available-capability"] && + capabilitiesResult["network-topology:node"][0]["netconf-node-topology:available-capabilities"]["available-capability"].map<any>(obj => convertPropertyNames(obj, replaceHyphen)) || []) + .map(cap => { + const capMatch = cap && capParser.exec(cap.capability); + return capMatch ? { + capabilityOrigin: cap.capabilityOrigin, + capability: capMatch && capMatch[2] || '', + version: capMatch && capMatch[1] || '', + } : null ; + }).filter((cap) => cap != null) || [] as any; + + const unavailableCapabilities = capabilitiesResult && capabilitiesResult["network-topology:node"] && capabilitiesResult["network-topology:node"].length > 0 && + (capabilitiesResult["network-topology:node"][0]["netconf-node-topology:unavailable-capabilities"] && + capabilitiesResult["network-topology:node"][0]["netconf-node-topology:unavailable-capabilities"]["unavailable-capability"] && + capabilitiesResult["network-topology:node"][0]["netconf-node-topology:unavailable-capabilities"]["unavailable-capability"].map<any>(obj => convertPropertyNames(obj, replaceHyphen)) || []) + .map(cap => { + const capMatch = cap && capParser.exec(cap.capability); + return capMatch ? { + failureReason: cap.failureReason, + capability: capMatch && capMatch[2] || '', + version: capMatch && capMatch[1] || '', + } : null ; + }).filter((cap) => cap != null) || [] as any; + + const importOnlyModules = availableCapabilities && availableCapabilities.findIndex((ac: {capability: string }) => ac.capability && ac.capability.toLowerCase() === "ietf-yang-library") > -1 + ? await this.getImportOnlyModules(nodeId) + : null; + + return { availableCapabilities, unavailableCapabilities, importOnlyModules }; } public async getMountedNetworkElementByMountId(nodeId: string): Promise<NetworkElementConnection | null> { @@ -80,7 +129,7 @@ class RestService { return networkElementResult && networkElementResult["data-provider:output"] && networkElementResult["data-provider:output"].data && networkElementResult["data-provider:output"].data.map(obj => convertPropertyNames(obj, replaceHyphen))[0] || null; } - + /** Reads the config data by restconf path. * @param path The restconf path to be used for read. * @returns The data. diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx index db426e814..8d0e19246 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx @@ -578,9 +578,11 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp private renderUIViewList(listSpecification: ViewSpecification, dataPath: string, listKeyProperty: string, apiDocPath: string, listData: { [key: string]: any }[]) { const listElements = listSpecification.elements; - const apiDocPathCreate = apiDocPath ? `${location.origin}${apiDocPath + const apiDocPathCreate = apiDocPath ? `${location.origin}${apiDocPath .replace("$$$standard$$$", "topology-netconfnode%20resources%20-%20RestConf%20RFC%208040") - .replace("$$$action$$$", "put")}_${listKeyProperty.replace(/[\/=\-\:]/g, '_')}_` : undefined; + .replace("$$$action$$$", "put")}${listKeyProperty ? `_${listKeyProperty.replace(/[\/=\-\:]/g, '_')}_` : '' }` : undefined; + + const config = listSpecification.config && listKeyProperty; // We can not configure a list with no key. const navigate = (path: string) => { this.props.history.push(`${this.props.match.url}${path}`); @@ -593,7 +595,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp onClick: () => { navigate("[]"); // empty key means new element }, - disabled: !listSpecification.config, + disabled: !config, }; const addWithApiDocElementAction = { @@ -603,7 +605,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp onClick: () => { window.open(apiDocPathCreate, '_blank'); }, - disabled: !listSpecification.config, + disabled: !config, }; const { classes, removeElement } = this.props; @@ -650,13 +652,13 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp }, []).concat([{ property: "Actions", disableFilter: true, disableSorting: true, type: ColumnType.custom, customControl: (({ rowData }) => { return ( - <DeleteIconWithConfirmation disabled={!listSpecification.config} rowData={rowData} onReload={() => this.props.vPath && this.props.reloadView(this.props.vPath)} /> + <DeleteIconWithConfirmation disabled={!config} rowData={rowData} onReload={() => this.props.vPath && this.props.reloadView(this.props.vPath)} /> ); }) }]) } onHandleClick={(ev, row) => { ev.preventDefault(); - navigate(`[${encodeURIComponent(row[listKeyProperty])}]`); + listKeyProperty && navigate(`[${encodeURIComponent(row[listKeyProperty])}]`); // Do not navigate without key. }} ></SelectElementTable> ); } diff --git a/sdnr/wt/odlux/apps/configurationApp/src/yang/yangParser.ts b/sdnr/wt/odlux/apps/configurationApp/src/yang/yangParser.ts index 2d38976d5..c80bd4c84 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/yang/yangParser.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/yang/yangParser.ts @@ -286,7 +286,7 @@ export class YangParser { public static ResolveStack = Symbol("ResolveStack"); - constructor(private _unavailableCapabilities: { failureReason: string; capability: string; }[] = []) { + constructor(private _unavailableCapabilities: { failureReason: string; capability: string; }[] = [], private _importOnlyModules: { name: string; revision: string; }[] = []) { } @@ -298,16 +298,16 @@ export class YangParser { return this._views; } - public async addCapability(capability: string, version?: string) { + public async addCapability(capability: string, version?: string, parentImportOnlyModule?: boolean) { // do not add twice if (this._modules[capability]) { - // console.warn(`Skipped capability: ${capability} since allready contained.` ); + // console.warn(`Skipped capability: ${capability} since already contained.` ); return; } - // // do not add unavaliabe capabilities + // // do not add unavailable capabilities // if (this._unavailableCapabilities.some(c => c.capability === capability)) { - // // console.warn(`Skipped capability: ${capability} since it is marked as unavaliable.` ); + // // console.warn(`Skipped capability: ${capability} since it is marked as unavailable.` ); // return; // } @@ -325,7 +325,8 @@ export class YangParser { throw new Error(`Root element capability ${rootStatement.arg} does not requested ${capability}.`); } - const isUnavaliabe = this._unavailableCapabilities.some(c => c.capability === capability); + const isUnavailable = this._unavailableCapabilities.some(c => c.capability === capability); + const isImportOnly = parentImportOnlyModule === true || this._importOnlyModules.some(c => c.name === capability); const module = this._modules[capability] = { name: rootStatement.arg, @@ -338,9 +339,11 @@ export class YangParser { typedefs: {}, views: {}, elements: {}, - state: isUnavaliabe - ? ModuleState.unabaliabe - : ModuleState.stable, + state: isUnavailable + ? ModuleState.unavailable + : isImportOnly + ? ModuleState.importOnly + : ModuleState.stable, }; await this.handleModule(module, rootStatement, capability); @@ -406,7 +409,7 @@ export class YangParser { // import all required files and set module state if (imports) for (let ind = 0; ind < imports.length; ++ind) { const moduleName = imports[ind].arg!; - await this.addCapability(moduleName); + await this.addCapability(moduleName, undefined, module.state === ModuleState.importOnly); const importedModule = this._modules[imports[ind].arg!]; if (importedModule && importedModule.state > ModuleState.stable) { module.state = Math.max(module.state, ModuleState.instable); @@ -415,7 +418,7 @@ export class YangParser { this.extractTypeDefinitions(rootStatement, module, ""); - this.extractIdentites(rootStatement, 0, module, ""); + this.extractIdentities(rootStatement, 0, module, ""); const groupings = this.extractGroupings(rootStatement, 0, module, ""); this._views.push(...groupings); @@ -440,8 +443,8 @@ export class YangParser { module.views[key] = this._views[viewIdIndex]; } - // add only the UI View if the module is avliable - if (module.state !== ModuleState.unabaliabe) this._views[0].elements[key] = module.elements[key]; + // add only the UI View if the module is available + if (module.state === ModuleState.stable || module.state === ModuleState.instable) this._views[0].elements[key] = module.elements[key]; }); }); return module; @@ -449,7 +452,7 @@ export class YangParser { public postProcess() { - // execute all post processes like resolving in propper order + // execute all post processes like resolving in proper order this._unionsToResolve.forEach(cb => { try { cb(); } catch (error) { console.warn(error.message); @@ -463,7 +466,7 @@ export class YangParser { } }); - // process all augmentations / sort by namespace changes to ensure propper order + // process all augmentations / sort by namespace changes to ensure proper order Object.keys(this.modules).forEach(modKey => { const module = this.modules[modKey]; const augmentKeysWithCounter = Object.keys(module.augments).map((key) => { @@ -517,7 +520,7 @@ export class YangParser { return result; } - const baseIdentites: Identity[] = []; + const baseIdentities: Identity[] = []; Object.keys(this.modules).forEach(modKey => { const module = this.modules[modKey]; Object.keys(module.identities).forEach(idKey => { @@ -526,11 +529,11 @@ export class YangParser { const base = this.resolveIdentity(identity.base, module); base.children?.push(identity); } else { - baseIdentites.push(identity); + baseIdentities.push(identity); } }); }); - baseIdentites.forEach(identity => { + baseIdentities.forEach(identity => { identity.values = identity.children && traverseIdentity(identity.children) || []; }); @@ -598,7 +601,7 @@ export class YangParser { }); } - /** Handles Goupings like named Container */ + /** Handles groupings like named Container */ private extractGroupings(statement: Statement, parentId: number, module: Module, currentPath: string): ViewSpecification[] { const subViews: ViewSpecification[] = []; const groupings = this.extractNodes(statement, "grouping"); @@ -620,7 +623,7 @@ export class YangParser { return subViews; } - /** Handles Augmants also like named Container */ + /** Handles augments also like named container */ private extractAugments(statement: Statement, parentId: number, module: Module, currentPath: string): ViewSpecification[] { const subViews: ViewSpecification[] = []; const augments = this.extractNodes(statement, "augment"); @@ -645,8 +648,8 @@ export class YangParser { return subViews; } - /** Handles Identities */ - private extractIdentites(statement: Statement, parentId: number, module: Module, currentPath: string) { + /** Handles identities */ + private extractIdentities(statement: Statement, parentId: number, module: Module, currentPath: string) { const identities = this.extractNodes(statement, "identity"); module.identities = identities.reduce<{ [name: string]: Identity }>((acc, cur) => { if (!cur.arg) { diff --git a/sdnr/wt/odlux/apps/connectApp/package.json b/sdnr/wt/odlux/apps/connectApp/package.json index 4fae39ccb..a6b23df84 100644 --- a/sdnr/wt/odlux/apps/connectApp/package.json +++ b/sdnr/wt/odlux/apps/connectApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/connectApp/pom.xml b/sdnr/wt/odlux/apps/connectApp/pom.xml index e3ca9dd4d..117a374c4 100644 --- a/sdnr/wt/odlux/apps/connectApp/pom.xml +++ b/sdnr/wt/odlux/apps/connectApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/connectApp/src/actions/tlsKeyActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/tlsKeyActions.ts new file mode 100644 index 000000000..1da16d9ad --- /dev/null +++ b/sdnr/wt/odlux/apps/connectApp/src/actions/tlsKeyActions.ts @@ -0,0 +1,60 @@ +/** + * ============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 { Action } from '../../../../framework/src/flux/action'; +import { Dispatch } from '../../../../framework/src/flux/store'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; + +import { TlsKeys } from '../models/networkElementConnection'; +import { connectService } from '../services/connectService'; + +/** + * Represents the base action. + */ +export class BaseAction extends Action { } + +/** + * Represents an action causing the store to load all TLS Keys. + */ +export class LoadAllTlsKeyListAction extends BaseAction { } + +/** + * Represents an action causing the store to get all TLS Keys. + */ +export class AllTlsKeyListLoadedAction extends BaseAction { + /** + * Initialize this instance. + * + * @param gets all the tlsKey list from the database. + */ + constructor(public tlsList: TlsKeys[] | null, public error?: string) { + super(); + } +} + +/** + * Represents an asynchronous thunk action to load all tlsKeys + */ + +export const loadAllTlsKeyListAsync = () => async (dispatch: Dispatch) => { + dispatch(new LoadAllTlsKeyListAction()); + connectService.getTlsKeys().then(TlsKeyList => { + dispatch(new AllTlsKeyListLoadedAction(TlsKeyList)); + }).catch(error => { + dispatch(new AllTlsKeyListLoadedAction(null, error)); + }); +}; diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx index 7d2f96af3..5a5ebcc45 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx @@ -54,7 +54,7 @@ class ConnectionStatusLogComponent extends React.Component<ConnectionStatusLogCo render(): JSX.Element { const refreshConnectionStatusLogAction = { - icon: Refresh, tooltip: 'Refresh Connection Status Log Table', ariaLabel:'refresh', onClick: () => { + icon: Refresh, tooltip: 'Refresh Connection Status Log Table',ariaLabel:'refresh', onClick: () => { this.setState({ refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.RefreshConnectionStatusLogTable }); diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx index 97e6647cf..df265c23d 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx @@ -24,7 +24,9 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; -import { FormControl, InputLabel, Select, MenuItem, Typography } from '@material-ui/core'; +import { FormControl, InputLabel, Select, MenuItem, Typography, Radio, RadioGroup, Options, FormLabel, FormControlLabel } from '@material-ui/core'; +import { loadAllTlsKeyListAsync } from '../actions/tlsKeyActions'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; @@ -67,13 +69,13 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ //make sure properties are there in case they get renamed const idProperty = propertyOf<UpdateNetworkElement>("id"); const isRequiredProperty = propertyOf<UpdateNetworkElement>("isRequired"); - + if (values.length === 2 && values.includes(idProperty as string) && values.includes(isRequiredProperty as string)) { // do not mount network element, if only isRequired is changed await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element)); - } else if(!(values.length===1 &&values.includes(idProperty as string))) { //do not edit or mount element, if only id was saved into object (no changes made!) + } else if (!(values.length === 1 && values.includes(idProperty as string))) { //do not edit or mount element, if only id was saved into object (no changes made!) await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element)); await dispatcher.dispatch(mountNetworkElementAsyncActionCreator(mountElement)); } @@ -81,7 +83,8 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ removeNetworkElement: async (element: UpdateNetworkElement) => { await dispatcher.dispatch(removeNetworkElementAsyncActionCreator(element)); dispatcher.dispatch(removeWebUriAction(element.id)); - } + }, + getAvailableTlsKeys: async () => await dispatcher.dispatch(loadAllTlsKeyListAsync()), }); type DialogSettings = { @@ -156,26 +159,62 @@ type EditNetworkElementDialogComponentProps = Connect<undefined, typeof mapDispa mode: EditNetworkElementDialogMode; initialNetworkElement: NetworkElementConnection; onClose: () => void; + radioChecked: string }; -type EditNetworkElementDialogComponentState = NetworkElementConnection & { isNameValid: boolean, isHostSet: boolean }; +type EditNetworkElementDialogComponentState = NetworkElementConnection & { + isNameValid: boolean, + isHostSet: boolean, + isPasswordSelected: boolean, + isTlsSelected: boolean, + radioSelected: string, + showPasswordTextField: boolean, + showTlsDropdown: boolean +}; class EditNetworkElementDialogComponent extends React.Component<EditNetworkElementDialogComponentProps, EditNetworkElementDialogComponentState> { constructor(props: EditNetworkElementDialogComponentProps) { super(props); - + this.handleRadioChange = this.handleRadioChange.bind(this); this.state = { nodeId: this.props.initialNetworkElement.nodeId, isRequired: false, host: this.props.initialNetworkElement.host, port: this.props.initialNetworkElement.port, isNameValid: true, - isHostSet: true + isHostSet: true, + isPasswordSelected: true, + isTlsSelected: false, + radioSelected: '', + showPasswordTextField: true, + showTlsDropdown: false }; } + public handleRadioChange = (event: any) => { + this.setState({ + radioSelected: event.target.value, + showPasswordTextField: event.target.value === 'password', + showTlsDropdown: event.target.value === 'tlsKey' + }); + } render(): JSX.Element { const setting = settings[this.props.mode]; + let { showPasswordTextField, showTlsDropdown, radioSelected } = this.state; + radioSelected = this.state.radioSelected.length > 0 ? this.state.radioSelected : this.props.radioChecked; + + if (radioSelected === 'password') { + radioSelected = 'password'; + showPasswordTextField = true; + showTlsDropdown = false; + } else if (radioSelected === 'tlsKey') { + radioSelected = 'tlsKey'; + showPasswordTextField = false; + showTlsDropdown = true; + } + + let tlsKeysList = this.props.state.connect.availableTlsKeys ? this.props.state.connect.availableTlsKeys.tlsKeysList ? this.props.state.connect.availableTlsKeys.tlsKeysList : [] : [] + return ( <Dialog open={this.props.mode !== EditNetworkElementDialogMode.None}> <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> @@ -187,9 +226,39 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme {!this.state.isNameValid && <Typography variant="body1" color="error">Name cannot be empty.</Typography>} <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="IP address" aria-label="ip adress" type="text" fullWidth value={this.state.host} onChange={(event) => { this.setState({ host: event.target.value }); }} /> {!this.state.isHostSet && <Typography variant="body1" color="error">IP Adress cannot be empty.</Typography>} + <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="netconfport" label="NetConf port" aria-label="netconf port" type="number" fullWidth value={this.state.port.toString()} onChange={(event) => { this.setState({ port: +event.target.value }); }} /> {setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="username" label="Username" aria-label="username" type="text" fullWidth value={this.state.username} onChange={(event) => { this.setState({ username: event.target.value }); }} /> || null} - {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} + + {setting.enableUsernameEditor && + <RadioGroup row aria-label="password-tls-key" name="password-tls-key" value={radioSelected} + onChange={this.handleRadioChange} > + <FormControlLabel value='password' control={<Radio />} label="Password" onChange={this.onRadioSelect} /> + <FormControlLabel value='tlsKey' control={<Radio />} label="TlsKey" onChange={this.onRadioSelect} /> + </RadioGroup> || null} + + {setting.enableUsernameEditor && showPasswordTextField && + <TextField disabled={!setting.enableUsernameEditor || !showPasswordTextField} spellCheck={false} margin="dense" + id="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}> + {setting.enableUsernameEditor && showTlsDropdown && + <div> + <InputLabel htmlFor="pass">--Select tls-key--</InputLabel> + <Select disabled={!setting.enableUsernameEditor || !showTlsDropdown} + id="tlsKey" aria-label="tlsKey" value={this.state.tlsKey} fullWidth // displayEmpty + onChange={(event) => { this.setState({ tlsKey: event.target.value as any }); }} + inputProps={{ name: 'tlsKey', id: 'tlsKey' }} > + <MenuItem value={""} disabled >--Select tls-key--</MenuItem> + {tlsKeysList.map(tlsKey => + (<MenuItem value={tlsKey.key} key={tlsKey.key} aria-label={tlsKey.key} >{tlsKey.key}</MenuItem>))} + </Select> + </div> + } + </FormControl> + <FormControl fullWidth disabled={!setting.enableUsernameEditor}> <InputLabel htmlFor="active">Required</InputLabel> <Select aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => { @@ -212,6 +281,7 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme port: this.state.port, username: this.state.username, password: this.state.password, + tlsKey: this.state.tlsKey }); } event.preventDefault(); @@ -227,14 +297,44 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme ) } + public renderTlsKeys = () => { + try { + this.props.getAvailableTlsKeys(); + } catch (err) { + console.log(err); + } + } + + public componentDidMount() { + this.renderTlsKeys(); + } + + public onRadioSelect = (e: any) => { + if (e.target.value == 'password') { + this.setState({ isPasswordSelected: true, isTlsSelected: false }) + } else if (e.target.value == 'tlsKey') { + this.setState({ isPasswordSelected: false, isTlsSelected: true }) + } + }; + private onApply = (element: NetworkElementConnection) => { this.props.onClose && this.props.onClose(); let updateElement: UpdateNetworkElement = { id: this.state.nodeId } + if (this.state.isPasswordSelected) { + element.tlsKey = '' + } + else if (this.state.isTlsSelected) { //check here + element.password = '' + } + switch (this.props.mode) { case EditNetworkElementDialogMode.AddNewNetworkElement: element && this.props.addNewNetworkElement(element); + this.setState({ + radioSelected: '' + }); break; case EditNetworkElementDialogMode.MountNetworkElement: element && this.props.mountNetworkElement(element); @@ -247,22 +347,31 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme updateElement.isRequired = this.state.isRequired; if (this.props.initialNetworkElement.username !== this.state.username) updateElement.username = this.state.username; - if (this.props.initialNetworkElement.password !== this.state.password) + if (this.props.initialNetworkElement.password !== this.state.password && this.state.isPasswordSelected) { updateElement.password = this.state.password; + updateElement.tlsKey = ''; + } + if (this.props.initialNetworkElement.tlsKey !== this.state.tlsKey && this.state.isTlsSelected) { + updateElement.tlsKey = this.state.tlsKey; + updateElement.password = ''; + } element && this.props.editNetworkElement(updateElement, element); + this.setState({ + radioSelected: '' + }); break; case EditNetworkElementDialogMode.RemoveNetworkElement: element && this.props.removeNetworkElement(updateElement); break; } - this.setState({ password: '', username: '' }); + this.setState({ password: '', username: '', tlsKey: '' }); this.resetRequieredFields(); }; private onCancel = () => { this.props.onClose && this.props.onClose(); - this.setState({ password: '', username: '' }); + this.setState({ password: '', username: '', tlsKey: '', radioSelected: '' }); this.resetRequieredFields(); } diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx index 73706f678..5d0757ab2 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx @@ -19,7 +19,7 @@ import * as React from 'react'; import { Theme, createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; import AddIcon from '@material-ui/icons/Add'; -import Refresh from '@material-ui/icons/Refresh'; +import Refresh from '@material-ui/icons/Refresh'; import LinkIcon from '@material-ui/icons/Link'; import LinkOffIcon from '@material-ui/icons/LinkOff'; import RemoveIcon from '@material-ui/icons/RemoveCircleOutline'; @@ -68,18 +68,18 @@ const styles = (theme: Theme) => createStyles({ }); type GetStatelessComponentProps<T> = T extends (props: infer P & { children?: React.ReactNode }) => any ? P : any -const MenuItemExt : React.FC<GetStatelessComponentProps<typeof MenuItem>> = (props) => { +const MenuItemExt: React.FC<GetStatelessComponentProps<typeof MenuItem>> = (props) => { const [disabled, setDisabled] = React.useState(true); const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => { - if (ev.button ===1){ - setDisabled(!disabled); - ev.preventDefault(); - } + if (ev.button === 1) { + setDisabled(!disabled); + ev.preventDefault(); + } }; return ( <div onMouseDown={onMouseDown} > - <MenuItem {...{...props, disabled: props.disabled && disabled }} /> - </div> + <MenuItem {...{ ...props, disabled: props.disabled && disabled }} /> + </div> ); }; @@ -119,17 +119,17 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement networkElementEditorMode: EditNetworkElementDialogMode.None, refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.None, elementInfo: null, - elementInfoFeature:null, + elementInfoFeature: null, infoNetworkElementEditorMode: InfoNetworkElementDialogMode.None }; } - + getContextMenu(rowData: NetworkElementConnection): JSX.Element[] { const mountUri = rowData.id && connectService.getNetworkElementUri(rowData.id); const mountPolicy = mountUri && getAccessPolicyByUrl(mountUri); - const canMount = mountPolicy && mountPolicy.POST || false; - - const { configuration} = this.props.applicationState as any; + const canMount = mountPolicy && mountPolicy.POST || false; + + const { configuration } = this.props.applicationState as any; const buttonArray = [ <MenuItemExt aria-label={"mount-button"} onClick={event => this.onOpenMountdNetworkElementsDialog(event, rowData)} disabled={!canMount} ><LinkIcon /><Typography>Mount</Typography></MenuItemExt>, <MenuItemExt aria-label={"unmount-button"} onClick={event => this.onOpenUnmountdNetworkElementsDialog(event, rowData)} disabled={!canMount} ><LinkOffIcon /><Typography>Unmount</Typography></MenuItemExt>, @@ -160,6 +160,12 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement render(): JSX.Element { const { classes } = this.props; const { networkElementToEdit } = this.state; + let savedRadio = "password"; + if (this.state.networkElementToEdit.password && this.state.networkElementToEdit.password.length > 0) { + savedRadio = 'password' + } else if (this.state.networkElementToEdit.tlsKey && this.state.networkElementToEdit.tlsKey.length > 0) { + savedRadio = 'tlsKey' + } // const mountUri = rowData.id && connectService.getNetworkElementUri(rowData.id); // const mountPolicy = mountUri && getAccessPolicyByUrl(mountUri); @@ -167,7 +173,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement const canAdd = true; const addRequireNetworkElementAction = { - icon: AddIcon, tooltip: 'Add', ariaLabel:"add-element", onClick: () => { + icon: AddIcon, tooltip: 'Add', ariaLabel: "add-element", onClick: () => { this.setState({ networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement, networkElementToEdit: emptyRequireNetworkElement, @@ -176,16 +182,16 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement }; const refreshNetworkElementsAction = { - icon: Refresh, tooltip: 'Refresh Network Elements table', ariaLabel:'refresh', onClick: () => { + icon: Refresh, tooltip: 'Refresh Network Elements table', ariaLabel: 'refresh', onClick: () => { this.setState({ refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable }); } }; - + return ( <> - <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...canAdd ? [addRequireNetworkElementAction]: []]} columns={[ + <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...canAdd ? [addRequireNetworkElementAction] : []]} columns={[ { property: "nodeId", title: "Node Name", type: ColumnType.text }, { property: "isRequired", title: "Required", type: ColumnType.boolean }, { property: "status", title: "Connection Status", type: ColumnType.text }, @@ -202,6 +208,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement initialNetworkElement={networkElementToEdit} mode={this.state.networkElementEditorMode} onClose={this.onCloseEditNetworkElementDialog} + radioChecked={savedRadio} /> <RefreshNetworkElementsDialog mode={this.state.refreshNetworkElementsEditorMode} @@ -240,6 +247,11 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement } private onOpenEditNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => { + let radioSaved; + if (element.password && element.password.length > 0) + radioSaved = 'password' + else if (element.tlsKey && element.tlsKey.length > 0) + radioSaved = 'tlsKey' this.setState({ networkElementToEdit: { nodeId: element.nodeId, @@ -248,6 +260,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement port: element.port, username: element.username, password: element.password, + tlsKey: element.tlsKey }, networkElementEditorMode: EditNetworkElementDialogMode.EditNetworkElement }); diff --git a/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.ts b/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.ts index 81ee97a0a..dbb9b2c04 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.ts +++ b/sdnr/wt/odlux/apps/connectApp/src/handlers/connectAppRootHandler.ts @@ -25,6 +25,7 @@ import { SetPanelAction, AddWebUriList, RemoveWebUri, SetWeburiSearchBusy } from import { PanelId } from '../models/panelId'; import { guiCutThrough } from '../models/guiCutTrough'; import { connectionStatusCountHandler, IConnectionStatusCount } from './connectionStatusCountHandler'; +import { availableTlsKeysActionHandler, IAvailableTlsKeysState } from './tlsKeyHandler'; export interface IConnectAppStoreState { networkElements: INetworkElementsState; @@ -34,6 +35,7 @@ export interface IConnectAppStoreState { elementFeatureInfo: IInfoNetworkElementFeaturesState; guiCutThrough: guiCutThroughState; connectionStatusCount: IConnectionStatusCount; + availableTlsKeys: IAvailableTlsKeysState } const currentOpenPanelHandler: IActionHandler<PanelId> = (state = null, action) => { @@ -92,7 +94,8 @@ const actionHandlers = { elementInfo: infoNetworkElementsActionHandler, elementFeatureInfo: infoNetworkElementFeaturesActionHandler, guiCutThrough: guiCutThroughHandler, - connectionStatusCount: connectionStatusCountHandler + connectionStatusCount: connectionStatusCountHandler, + availableTlsKeys: availableTlsKeysActionHandler }; export const connectAppRootHandler = combineActionHandler<IConnectAppStoreState>(actionHandlers); diff --git a/sdnr/wt/odlux/apps/connectApp/src/handlers/tlsKeyHandler.ts b/sdnr/wt/odlux/apps/connectApp/src/handlers/tlsKeyHandler.ts new file mode 100644 index 000000000..326b3cc8e --- /dev/null +++ b/sdnr/wt/odlux/apps/connectApp/src/handlers/tlsKeyHandler.ts @@ -0,0 +1,55 @@ +/** + * ============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 { IActionHandler } from '../../../../framework/src/flux/action'; + +import { AllTlsKeyListLoadedAction, LoadAllTlsKeyListAction } from '../actions/tlsKeyActions'; +import { TlsKeys } from '../models/networkElementConnection'; + +export interface IAvailableTlsKeysState { + tlsKeysList: TlsKeys[]; + busy: boolean; +} + +const tlsKeysStateInit: IAvailableTlsKeysState = { + tlsKeysList: [], + busy: false, +}; + +export const availableTlsKeysActionHandler: IActionHandler<IAvailableTlsKeysState> = (state = tlsKeysStateInit, action) => { + if (action instanceof LoadAllTlsKeyListAction) { + state = { + ...state, + busy: true + }; + + } else if (action instanceof AllTlsKeyListLoadedAction) { + if (!action.error && action.tlsList) { + state = { + ...state, + tlsKeysList: action.tlsList, + busy: false, + }; + } else { + state = { + ...state, + busy: false + }; + } + } + return state; +};
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/connectApp/src/index.html b/sdnr/wt/odlux/apps/connectApp/src/index.html index 6f44c25f7..35dbdf71d 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/index.html +++ b/sdnr/wt/odlux/apps/connectApp/src/index.html @@ -19,7 +19,7 @@ connectApp.register(); faultApp.register(); inventoryApp.register(); - app("./app.tsx").configureApplication({ authentication:"basic", enablePolicy: false,}); + app("./app.tsx").configureApplication({ authentication:"oauth", enablePolicy: false, transportpceUrl:"http://test.de"}); app("./app.tsx").runApplication(); }); </script> diff --git a/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts b/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts index 71eddc808..89070ab39 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts +++ b/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts @@ -24,6 +24,7 @@ export type NetworkElementConnection = { port: number; username?: string; password?: string; + tlsKey?: string; weburi?: string; isWebUriUnreachable?: boolean; status?: "Connected" | "mounted" | "unmounted" | "Connecting" | "Disconnected" | "idle"; @@ -47,12 +48,18 @@ export type UpdateNetworkElement = { isRequired?: boolean; username?: string; password?: string; + tlsKey?: string; } export type ConnectionStatus = { status: string } +export type TlsKeys = { + key: string +} + + /** * Checks if a object has a given propertyname, if yes, the name is returned as string. * @throws at compile time if property is not available diff --git a/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx b/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx index 461e14023..1990cc03d 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx @@ -88,9 +88,9 @@ export function register() { subscribe<IFormatedMessage>(["object-creation-notification", "object-deletion-notification", "attribute-value-changed-notification"], (msg => { const store = applicationApi.applicationStore; if (msg && msg.type.type === "object-creation-notification" && store) { - store.dispatch(new AddSnackbarNotification({ message: `Adding network element [${msg['node-id']}]`, options: { variant: 'info' } })); + store.dispatch(new AddSnackbarNotification({ message: `Adding network element [${msg.data['object-id-ref']}]`, options: { variant: 'info' } })); } else if (msg && (msg.type.type === "object-deletion-notification" || msg.type.type === "attribute-value-changed-notification") && store) { - store.dispatch(new AddSnackbarNotification({ message: `Updating network element [${msg['node-id']}]`, options: { variant: 'info' } })); + store.dispatch(new AddSnackbarNotification({ message: `Updating network element [${msg.data['object-id-ref']}]`, options: { variant: 'info' } })); } if (store) { store.dispatch(updateCurrentViewAsyncAction() as any).then(() => { diff --git a/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts b/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts index ed8b0f67d..427acd3ec 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts +++ b/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts @@ -16,243 +16,289 @@ * ============LICENSE_END========================================================================== */ - import { requestRest } from '../../../../framework/src/services/restService'; - import { NetworkElementConnection, ConnectionStatus, UpdateNetworkElement } from '../models/networkElementConnection'; - import { convertPropertyNames, replaceUpperCase } from '../../../../framework/src/utilities/yangHelper'; - import { Result } from '../../../../framework/src/models/elasticSearch'; - - import { FeatureTopology, Topology, TopologyNode, Module } from '../models/topologyNetconf'; - import { guiCutThrough } from '../models/guiCutTrough'; - - /** - * Represents a web api accessor service for all Network Elements actions. - */ - class ConnectService { - public getNetworkElementUri = (nodeId: string) => '/rests/data/network-topology:network-topology/topology=topology-netconf/node=' + nodeId; - public getNetworkElementConnectDataProviderUri = (operation: "create" | "update" | "delete" ) => `/rests/operations/data-provider:${operation}-network-element-connection`; - public getAllWebUriExtensionsForNetworkElementListUri = (nodeId: string) => this.getNetworkElementUri(nodeId) + '/yang-ext:mount/core-model:network-element'; - public getNetworkElementYangLibraryFeature = (nodeId: string) => '/rests/data/network-topology:network-topology/topology=topology-netconf/node=' + nodeId + '/yang-ext:mount/ietf-yang-library:yang-library?content=nonconfig' - - /** - * Inserts a network elements. - */ - public async createNetworkElement(element: NetworkElementConnection): Promise<NetworkElementConnection | null> { - const path = this.getNetworkElementConnectDataProviderUri("create") ; - const result = await requestRest<NetworkElementConnection>(path, { - method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": element }, replaceUpperCase)) - }); - return result || null; - } - - /** - * Updates a network element. +import { requestRest } from '../../../../framework/src/services/restService'; +import { NetworkElementConnection, ConnectionStatus, UpdateNetworkElement } from '../models/networkElementConnection'; +import { TlsKeys } from '../models/networkElementConnection' +import { convertPropertyNames, replaceUpperCase } from '../../../../framework/src/utilities/yangHelper'; +import { Result } from '../../../../framework/src/models/elasticSearch'; + +import { FeatureTopology, Topology, TopologyNode, Module } from '../models/topologyNetconf'; +import { guiCutThrough } from '../models/guiCutTrough'; + +/** +* Represents a web api accessor service for all Network Elements actions. +*/ +class ConnectService { + public getNetworkElementUri = (nodeId: string) => '/rests/data/network-topology:network-topology/topology=topology-netconf/node=' + nodeId; + public getNetworkElementConnectDataProviderUri = (operation: "create" | "update" | "delete") => `/rests/operations/data-provider:${operation}-network-element-connection`; + public getAllWebUriExtensionsForNetworkElementListUri = (nodeId: string) => this.getNetworkElementUri(nodeId) + '/yang-ext:mount/core-model:network-element'; + public getNetworkElementYangLibraryFeature = (nodeId: string) => '/rests/data/network-topology:network-topology/topology=topology-netconf/node=' + nodeId + '/yang-ext:mount/ietf-yang-library:yang-library?content=nonconfig' + + /** + * Inserts a network elements. */ - public async updateNetworkElement(element: UpdateNetworkElement): Promise<NetworkElementConnection | null> { - const path = this.getNetworkElementConnectDataProviderUri("update"); - const result = await requestRest<NetworkElementConnection>(path, { - method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": element }, replaceUpperCase)) - }); - return result || null; - } - - /** - * Deletes a network element. - */ - public async deleteNetworkElement(element: UpdateNetworkElement): Promise<NetworkElementConnection | null> { - const query = { - "id": element.id - }; - const path = this.getNetworkElementConnectDataProviderUri("delete"); - const result = await requestRest<NetworkElementConnection>(path, { - method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": query }, replaceUpperCase)) - }); - return result || null; - } - - /** Mounts network element. */ - public async mountNetworkElement(networkElement: NetworkElementConnection): Promise<boolean> { - const path = this.getNetworkElementUri(networkElement.nodeId); - const mountXml = [ - '<node xmlns="urn:TBD:params:xml:ns:yang:network-topology">', - `<node-id>${networkElement.nodeId}</node-id>`, - `<host xmlns="urn:opendaylight:netconf-node-topology">${networkElement.host}</host>`, - `<port xmlns="urn:opendaylight:netconf-node-topology">${networkElement.port}</port>`, - `<username xmlns="urn:opendaylight:netconf-node-topology">${networkElement.username}</username>`, - `<password xmlns="urn:opendaylight:netconf-node-topology">${networkElement.password}</password>`, - ' <tcp-only xmlns="urn:opendaylight:netconf-node-topology">false</tcp-only>', - - ' <!-- non-mandatory fields with default values, you can safely remove these if you do not wish to override any of these values-->', - ' <reconnect-on-changed-schema xmlns="urn:opendaylight:netconf-node-topology">false</reconnect-on-changed-schema>', - ' <connection-timeout-millis xmlns="urn:opendaylight:netconf-node-topology">20000</connection-timeout-millis>', - ' <max-connection-attempts xmlns="urn:opendaylight:netconf-node-topology">100</max-connection-attempts>', - ' <between-attempts-timeout-millis xmlns="urn:opendaylight:netconf-node-topology">2000</between-attempts-timeout-millis>', - ' <sleep-factor xmlns="urn:opendaylight:netconf-node-topology">1.5</sleep-factor>', - - ' <!-- keepalive-delay set to 0 turns off keepalives-->', - ' <keepalive-delay xmlns="urn:opendaylight:netconf-node-topology">120</keepalive-delay>', - '</node>'].join(''); - - try { - const result = await requestRest<string>(path, { - method: 'PUT', - headers: { - 'Content-Type': 'application/xml', - 'Accept': 'application/xml' - }, - body: mountXml - }); - // expect an empty answer - return result !== null; - } catch { - return false; - } - }; - - /** Unmounts a network element by its id. */ - public async unmountNetworkElement(nodeId: string): Promise<boolean> { - const path = this.getNetworkElementUri(nodeId); - - try { - const result = await requestRest<string>(path, { - method: 'DELETE', - headers: { - 'Content-Type': 'application/xml', - 'Accept': 'application/xml' - }, - }); - // expect an empty answer - return result !== null; - - } catch { - return false; - } - }; - - /** Yang capabilities of the selected network elements. */ - public async infoNetworkElement(nodeId: string): Promise<TopologyNode | null> { - const path = this.getNetworkElementUri(nodeId); - const topologyRequestPomise = requestRest<Topology>(path, { method: "GET" }); - - return topologyRequestPomise && topologyRequestPomise.then(result => { - return result && result["network-topology:node"] && result["network-topology:node"][0] || null; - }); - } - - - /** Yang features of the selected network element module. */ - public async infoNetworkElementFeatures(nodeId: string): Promise<Module[] | null | undefined> { - const path = this.getNetworkElementYangLibraryFeature(nodeId); - const topologyRequestPomise = requestRest<FeatureTopology>(path, { method: "GET" }); - - return topologyRequestPomise && topologyRequestPomise.then(result => { - const resultFinal = result && result['ietf-yang-library:yang-library'] - && result["ietf-yang-library:yang-library"]["module-set"] && - result["ietf-yang-library:yang-library"]["module-set"][0] && - result["ietf-yang-library:yang-library"]["module-set"][0]['module'] || null; - return resultFinal; - }); - } - - - - /** - * Get the connection state of the network element. + public async createNetworkElement(element: NetworkElementConnection): Promise<NetworkElementConnection | null> { + const path = this.getNetworkElementConnectDataProviderUri("create"); + const result = await requestRest<NetworkElementConnection>(path, { + method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": element }, replaceUpperCase)) + }); + return result || null; + } + + /** + * Updates a network element. + */ + public async updateNetworkElement(element: UpdateNetworkElement): Promise<NetworkElementConnection | null> { + const path = this.getNetworkElementConnectDataProviderUri("update"); + const result = await requestRest<NetworkElementConnection>(path, { + method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": element }, replaceUpperCase)) + }); + return result || null; + } + + /** + * Deletes a network element. */ - public async getNetworkElementConnectionStatus(element: string): Promise<(ConnectionStatus)[] | null> { - const path = `/rests/operations/data-provider:read-network-element-connection-list`; - const query = { - "data-provider:input": { - "filter": [{ - "property": "node-id", - "filtervalue": element - }], - "pagination": { - "size": 20, - "page": 1 - } - } - } - const result = await requestRest<Result<ConnectionStatus>>(path, { method: "POST", body: JSON.stringify(query) }); - return result && result["data-provider:output"] && result["data-provider:output"].data && result["data-provider:output"].data.map(ne => ({ - status: ne.status - })) || null; - } - - public async getAllWebUriExtensionsForNetworkElementListAsync(neList: string[]): Promise<(guiCutThrough)[]> { - const path = `/rests/operations/data-provider:read-gui-cut-through-entry`; - let webUriList: guiCutThrough[] = [] - const query = { - "data-provider:input": { - "filter": [{ - "property": "id", - "filtervalues": neList - }], - "pagination": { - "size": 20, - "page": 1 - } - } - } - - const result = await requestRest<Result<guiCutThrough>>(path, { method: "POST", body: JSON.stringify(query) }); - const resultData = result && result["data-provider:output"] && result["data-provider:output"].data; - neList.forEach(nodeId => { - let entryNotFound = true; - if (resultData) { - const BreakException = {}; - try { - resultData.forEach(entry => { - if (entry.id == nodeId) { - entryNotFound = false; - if (entry.weburi) { - webUriList.push({ id: nodeId, weburi: entry.weburi }); - } else { - webUriList.push({ id: nodeId, weburi: undefined }); - } - throw BreakException; - } - }); - } catch (e) {} - } - if (entryNotFound) - webUriList.push({ id: nodeId, weburi: undefined }); - }); - return webUriList; - } - - // public async getAllWebUriExtensionsForNetworkElementListAsync(ne: string[]): Promise<(guiCutThrough)[] | null> { - - // let promises: any[] = []; - // let webUris: guiCutThrough[] = [] - - // ne.forEach(nodeId => { - // const path = this.getAllWebUriExtensionsForNetworkElementListUri(nodeId); - - // // add search request to array - // promises.push(requestRest<any>(path, { method: "GET" }) - // .then(result => { - // if (result != null && result['core-model:network-element'] && result['core-model:network-element'].extension) { - // const webUri = result['core-model:network-element'].extension.find((item: any) => item['value-name'] === "webUri") - // if (webUri) { - // webUris.push({ weburi: webUri.value, id: nodeId }); - // } else { - // webUris.push({ weburi: undefined, id: nodeId }); - // } - // } else { - // webUris.push({ weburi: undefined, id: nodeId }); - // } - // }) - // .catch(error => { - // webUris.push({ weburi: undefined, id: nodeId }); - // })) - // }) - // // wait until all promises are done and return weburis - // return Promise.all(promises).then(result => { return webUris }); - // } - - } - - - - export const connectService = new ConnectService(); -
\ No newline at end of file + public async deleteNetworkElement(element: UpdateNetworkElement): Promise<NetworkElementConnection | null> { + const query = { + "id": element.id + }; + const path = this.getNetworkElementConnectDataProviderUri("delete"); + const result = await requestRest<NetworkElementConnection>(path, { + method: "POST", body: JSON.stringify(convertPropertyNames({ "data-provider:input": query }, replaceUpperCase)) + }); + return result || null; + } + + /** Mounts network element. */ + public async mountNetworkElement(networkElement: NetworkElementConnection): Promise<boolean> { + const path = this.getNetworkElementUri(networkElement.nodeId); + const mountXml = [ + '<node xmlns="urn:TBD:params:xml:ns:yang:network-topology">', + `<node-id>${networkElement.nodeId}</node-id>`, + `<host xmlns="urn:opendaylight:netconf-node-topology">${networkElement.host}</host>`, + `<port xmlns="urn:opendaylight:netconf-node-topology">${networkElement.port}</port>`, + `<username xmlns="urn:opendaylight:netconf-node-topology">${networkElement.username}</username>`, + `<password xmlns="urn:opendaylight:netconf-node-topology">${networkElement.password}</password>`, + ' <tcp-only xmlns="urn:opendaylight:netconf-node-topology">false</tcp-only>', + + ' <!-- non-mandatory fields with default values, you can safely remove these if you do not wish to override any of these values-->', + ' <reconnect-on-changed-schema xmlns="urn:opendaylight:netconf-node-topology">false</reconnect-on-changed-schema>', + ' <connection-timeout-millis xmlns="urn:opendaylight:netconf-node-topology">20000</connection-timeout-millis>', + ' <max-connection-attempts xmlns="urn:opendaylight:netconf-node-topology">100</max-connection-attempts>', + ' <between-attempts-timeout-millis xmlns="urn:opendaylight:netconf-node-topology">2000</between-attempts-timeout-millis>', + ' <sleep-factor xmlns="urn:opendaylight:netconf-node-topology">1.5</sleep-factor>', + + ' <!-- keepalive-delay set to 0 turns off keepalives-->', + ' <keepalive-delay xmlns="urn:opendaylight:netconf-node-topology">120</keepalive-delay>', + '</node>'].join(''); + + const tlsXml = [ + '<node xmlns="urn:TBD:params:xml:ns:yang:network-topology">', + `<node-id>${networkElement.nodeId}</node-id>`, + '<key-based xmlns="urn:opendaylight:netconf-node-topology">', + `<key-id xmlns="urn:opendaylight:netconf-node-topology">${networkElement.tlsKey}</key-id>`, + `<username xmlns="urn:opendaylight:netconf-node-topology">${networkElement.username}</username>`, + '</key-based>', + `<host xmlns="urn:opendaylight:netconf-node-topology">${networkElement.host}</host>`, + `<port xmlns="urn:opendaylight:netconf-node-topology">${networkElement.port}</port>`, + '<tcp-only xmlns="urn:opendaylight:netconf-node-topology">false</tcp-only>', + '<protocol xmlns="urn:opendaylight:netconf-node-topology">', + '<name xmlns="urn:opendaylight:netconf-node-topology">TLS</name>', + ' </protocol>', + '<max-connection-attempts xmlns="urn:opendaylight:netconf-node-topology">2</max-connection-attempts>', + '</node>'].join('') + let bodyXml; + if (networkElement.password) { + bodyXml = mountXml + } + else { + bodyXml = tlsXml + } + + try { + const result = await requestRest<string>(path, { + method: 'PUT', + headers: { + 'Content-Type': 'application/xml', + 'Accept': 'application/xml' + }, + body: bodyXml + }); + // expect an empty answer + return result !== null; + } catch { + return false; + } + }; + + /** Unmounts a network element by its id. */ + public async unmountNetworkElement(nodeId: string): Promise<boolean> { + const path = this.getNetworkElementUri(nodeId); + + try { + const result = await requestRest<string>(path, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/xml', + 'Accept': 'application/xml' + }, + }); + // expect an empty answer + return result !== null; + + } catch { + return false; + } + }; + + /** Yang capabilities of the selected network elements. */ + public async infoNetworkElement(nodeId: string): Promise<TopologyNode | null> { + const path = this.getNetworkElementUri(nodeId); + const topologyRequestPomise = requestRest<Topology>(path, { method: "GET" }); + + return topologyRequestPomise && topologyRequestPomise.then(result => { + return result && result["network-topology:node"] && result["network-topology:node"][0] || null; + }); + } + + + /** Yang features of the selected network element module. */ + public async infoNetworkElementFeatures(nodeId: string): Promise<Module[] | null | undefined> { + const path = this.getNetworkElementYangLibraryFeature(nodeId); + const topologyRequestPomise = requestRest<FeatureTopology>(path, { method: "GET" }); + + return topologyRequestPomise && topologyRequestPomise.then(result => { + const resultFinal = result && result['ietf-yang-library:yang-library'] + && result["ietf-yang-library:yang-library"]["module-set"] && + result["ietf-yang-library:yang-library"]["module-set"][0] && + result["ietf-yang-library:yang-library"]["module-set"][0]['module'] || null; + return resultFinal; + }); + } + + + + /** + * Get the connection state of the network element. + */ + public async getNetworkElementConnectionStatus(element: string): Promise<(ConnectionStatus)[] | null> { + const path = `/rests/operations/data-provider:read-network-element-connection-list`; + const query = { + "data-provider:input": { + "filter": [{ + "property": "node-id", + "filtervalue": element + }], + "pagination": { + "size": 20, + "page": 1 + } + } + } + const result = await requestRest<Result<ConnectionStatus>>(path, { method: "POST", body: JSON.stringify(query) }); + return result && result["data-provider:output"] && result["data-provider:output"].data && result["data-provider:output"].data.map(ne => ({ + status: ne.status + })) || null; + } + + /** + * Gets all available tlsKeys. + */ + + public async getTlsKeys(): Promise<(TlsKeys)[] | null> { + const path = '/rests/operations/data-provider:read-tls-key-entry'; + const query = { + "data-provider:input": { + "filter": [], + "sortorder": [], + "pagination": { + "size": 20, + "page": 1 + } + } + }; + + const result = await requestRest<Result<string>>(path, { method: "POST", body: JSON.stringify(query) }); + return result && result["data-provider:output"] && result["data-provider:output"].data && result["data-provider:output"].data.map(ne => ({ + key: ne + })) || null; + } + + public async getAllWebUriExtensionsForNetworkElementListAsync(neList: string[]): Promise<(guiCutThrough)[]> { + const path = `/rests/operations/data-provider:read-gui-cut-through-entry`; + let webUriList: guiCutThrough[] = [] + const query = { + "data-provider:input": { + "filter": [{ + "property": "id", + "filtervalues": neList + }], + "pagination": { + "size": 20, + "page": 1 + } + } + } + + const result = await requestRest<Result<guiCutThrough>>(path, { method: "POST", body: JSON.stringify(query) }); + const resultData = result && result["data-provider:output"] && result["data-provider:output"].data; + neList.forEach(nodeId => { + let entryNotFound = true; + if (resultData) { + const BreakException = {}; + try { + resultData.forEach(entry => { + if (entry.id == nodeId) { + entryNotFound = false; + if (entry.weburi) { + webUriList.push({ id: nodeId, weburi: entry.weburi }); + } else { + webUriList.push({ id: nodeId, weburi: undefined }); + } + throw BreakException; + } + }); + } catch (e) { } + } + if (entryNotFound) + webUriList.push({ id: nodeId, weburi: undefined }); + }); + return webUriList; + } + + // public async getAllWebUriExtensionsForNetworkElementListAsync(ne: string[]): Promise<(guiCutThrough)[] | null> { + + // let promises: any[] = []; + // let webUris: guiCutThrough[] = [] + + // ne.forEach(nodeId => { + // const path = this.getAllWebUriExtensionsForNetworkElementListUri(nodeId); + + // // add search request to array + // promises.push(requestRest<any>(path, { method: "GET" }) + // .then(result => { + // if (result != null && result['core-model:network-element'] && result['core-model:network-element'].extension) { + // const webUri = result['core-model:network-element'].extension.find((item: any) => item['value-name'] === "webUri") + // if (webUri) { + // webUris.push({ weburi: webUri.value, id: nodeId }); + // } else { + // webUris.push({ weburi: undefined, id: nodeId }); + // } + // } else { + // webUris.push({ weburi: undefined, id: nodeId }); + // } + // }) + // .catch(error => { + // webUris.push({ weburi: undefined, id: nodeId }); + // })) + // }) + // // wait until all promises are done and return weburis + // return Promise.all(promises).then(result => { return webUris }); + // } + +} + + + +export const connectService = new ConnectService(); diff --git a/sdnr/wt/odlux/apps/demoApp/package.json b/sdnr/wt/odlux/apps/demoApp/package.json index 7756fe328..d52383719 100644 --- a/sdnr/wt/odlux/apps/demoApp/package.json +++ b/sdnr/wt/odlux/apps/demoApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/demoApp/pom.xml b/sdnr/wt/odlux/apps/demoApp/pom.xml index e3f27d5c9..7c95fc3b5 100644 --- a/sdnr/wt/odlux/apps/demoApp/pom.xml +++ b/sdnr/wt/odlux/apps/demoApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/eventLogApp/package.json b/sdnr/wt/odlux/apps/eventLogApp/package.json index dfcebfe63..52c49b328 100644 --- a/sdnr/wt/odlux/apps/eventLogApp/package.json +++ b/sdnr/wt/odlux/apps/eventLogApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/eventLogApp/pom.xml b/sdnr/wt/odlux/apps/eventLogApp/pom.xml index 0b061a5b9..2cc6234da 100644 --- a/sdnr/wt/odlux/apps/eventLogApp/pom.xml +++ b/sdnr/wt/odlux/apps/eventLogApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/faultApp/package.json b/sdnr/wt/odlux/apps/faultApp/package.json index 5d1439b85..cb03e49d9 100644 --- a/sdnr/wt/odlux/apps/faultApp/package.json +++ b/sdnr/wt/odlux/apps/faultApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/faultApp/pom.xml b/sdnr/wt/odlux/apps/faultApp/pom.xml index 63236dab4..fec425892 100644 --- a/sdnr/wt/odlux/apps/faultApp/pom.xml +++ b/sdnr/wt/odlux/apps/faultApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/helpApp/package.json b/sdnr/wt/odlux/apps/helpApp/package.json index 58e68dd03..51e383b11 100644 --- a/sdnr/wt/odlux/apps/helpApp/package.json +++ b/sdnr/wt/odlux/apps/helpApp/package.json @@ -32,8 +32,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/helpApp/pom.xml b/sdnr/wt/odlux/apps/helpApp/pom.xml index da49a7850..6bea827e5 100644 --- a/sdnr/wt/odlux/apps/helpApp/pom.xml +++ b/sdnr/wt/odlux/apps/helpApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/inventoryApp/package.json b/sdnr/wt/odlux/apps/inventoryApp/package.json index 0f6b40379..e78f3ac82 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/package.json +++ b/sdnr/wt/odlux/apps/inventoryApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/inventoryApp/pom.xml b/sdnr/wt/odlux/apps/inventoryApp/pom.xml index 2701e04ed..377446edc 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/pom.xml +++ b/sdnr/wt/odlux/apps/inventoryApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/package.json b/sdnr/wt/odlux/apps/linkCalculationApp/package.json index 171770603..c03afe19b 100644 --- a/sdnr/wt/odlux/apps/linkCalculationApp/package.json +++ b/sdnr/wt/odlux/apps/linkCalculationApp/package.json @@ -29,8 +29,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/pom.xml b/sdnr/wt/odlux/apps/linkCalculationApp/pom.xml index 5467c8b5d..c5d8c3617 100644 --- a/sdnr/wt/odlux/apps/linkCalculationApp/pom.xml +++ b/sdnr/wt/odlux/apps/linkCalculationApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts b/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts index e7427e4cc..0849058dc 100644 --- a/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts @@ -21,98 +21,155 @@ import { Dispatch } from "../../../../framework/src/flux/store"; import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; -export class UpdateLinkIdAction extends Action{ - constructor(public linkId: string){ +export class UpdateLinkIdAction extends Action { + constructor(public linkId: string) { super(); } } -export class UpdateFrequencyAction extends Action{ - constructor(public frequency: number){ +export class UpdateFrequencyAction extends Action { + constructor(public frequency: number) { super(); } } -export class UpdateSiteAction extends Action{ +export class UpdateSiteAction extends Action { constructor( public siteA?: any, public siteB?: any - ){ + ) { super(); } } -export class UpdateRainAttAction extends Action{ - - constructor(public rainAtt: number){ +export class UpdateRainAttAction extends Action { + + constructor(public rainAtt: number) { super(); } } -export class UpdateRainValAction extends Action{ - constructor(public rainVal: number){ +export class UpdateRainValAction extends Action { + constructor(public rainVal: number) { super(); } } -export class updateHideForm extends Action{ - constructor(public formView: boolean){ +export class updateHideForm extends Action { + constructor(public formView: boolean) { super(); } } -export class UpdateDistanceAction extends Action{ - constructor(public distance: number){ +export class UpdateDistanceAction extends Action { + constructor(public distance: number) { super(); } } -export class UpdateFslCalculation extends Action{ - constructor(public fsl: number){ +export class UpdateFslCalculation extends Action { + constructor(public fsl: number) { super(); } } -export class UpdateLatLonAction extends Action{ +export class UpdateLatLonAction extends Action { constructor( public Lat1: number, - public Lon1:number, - public Lat2: number, + public Lon1: number, + public Lat2: number, public Lon2: number - ){ + ) { + super(); + + } +} +export class UpdatePolAction extends Action { + constructor(public polarization: string) { super(); - } } -export class UpdatePolAction extends Action{ - constructor(public polarization: string){ +export class isCalculationServerReachableAction extends Action { + constructor(public reachable: boolean) { super(); } } -export class isCalculationServerReachableAction extends Action{ - constructor(public reachable: boolean){ +export class updateAltitudeAction extends Action { + constructor( + public amslA: number, + public aglA: number, + public amslB: number, + public aglB: number + ) { super(); } } -export class updateAltitudeAction extends Action{ +export class UpdateAbsorptionLossAction extends Action { constructor( - public amslA:number, - public aglA:number, - public amslB:number, - public aglB:number - ){ + public absorptionOxygen: number, + public absorptionWater: number, + + ) { + super(); + } +} +export class UpdateWorstMonthRainAction extends Action { + constructor(public month: string) { + super(); + } +} + +export class UpdateEIRPAction extends Action { + constructor(public eirpA: number,public eirpB: number) { + super(); + } +} +export class UpdateAntennaGainAction extends Action { + constructor(public antennaGainList: string[]) { + super(); + } +} +export class UpdateAntennaListAction extends Action { + constructor(public antennaList: string[]) { + super(); + } +} +export class UpdateAntennaAction extends Action { + constructor(public antennaA: string | null, public antennaB : string | null) { + super(); + } +} +export class UpdateRadioAttributesAction extends Action { + constructor(public som: number , public eirpA : number, public eirpB : number) { super(); } } -export class UpdateAbsorptionLossAction extends Action{ - constructor( - public absorptionOxygen:number, - public absorptionWater:number, - - ){ - super(); - } +export class UpdateTxPowerAction extends Action { + constructor(public txPowerA: string | null , public txPowerB : string | null) { + super(); + } } -export class UpdateWorstMonthRainAction extends Action{ - constructor(public month: string){ +export class UpdateRxSensitivityAction extends Action { + constructor(public rxSensitivityA: string | null , public rxSensitivityB : string | null) { super(); } } + +export const updateAntennaList = (frequency: number) => async (dispatcher: Dispatch, getState: () => IApplicationStoreState) => { + let antennaList: string[] = [] + let antennaDiameterList: string[] = [] + let antennaGainList :string[] =[] + //switch case here frequency = 26? antennaList.push + switch (frequency) { + case 7: antennaList.push('ANDREW VHLPX2.5-7W', 'ANDREW VHLPX3-7W', 'ANDREW VHLPX4-7W', 'ANDREW VHLPX6-7W' ), antennaDiameterList.push('0.6','0.9','1.2','1.8'), antennaGainList.push('33.90','35.50','37.30','40.61'); break + case 11: antennaList.push('ANDREW VHLPX2-11W', 'ANDREW VHLPX3-11W', 'ANDREW VHLPX4-11W'), antennaDiameterList.push('0.6','0.9','1.2'), antennaGainList.push('34.50','38.4','40.70');break + case 15: antennaList.push('ANDREW VHLPX1-15', 'ANDREW VHLPX2-15', 'ANDREW VHLPX3-15', 'ANDREW VHLPX4-15'), antennaDiameterList.push('0.3','0.6','0.9','1.2'), antennaGainList.push('32.00','36.80','41.11','42.90');break + case 23: antennaList.push('ANDREW VHLPX1-23', 'ANDREW VHLPX2-23', 'ANDREW VHLPX3-23', 'ANDREW VHLPX4-23'), antennaDiameterList.push('0.3','0.6','0.9','1.2'), antennaGainList.push('35.30','40.21','44.80','46.71');break + case 26: antennaList.push('ANDREW VHLPX1-26', 'ANDREW VHLPX2-26', 'ANDREW VHLPX3-26'), antennaDiameterList.push('0.3','0.6','0.9'), antennaGainList.push('36.61','40.21','41.21','45.80');break + case 28: antennaList.push('ANDREW VHLPX1-28', 'ANDREW VHLPX2-28'), antennaDiameterList.push('0.3','0.6'), antennaGainList.push('38.11','42.21');break + case 38: antennaList.push('ANDREW VHLPX1-38', 'ANDREW VHLPX2-38'), antennaDiameterList.push('0.3','0.6'), antennaGainList.push('40.11','45.21');break + case 42: antennaList.push('ANDREW VHLPX1-42-XXX/D', 'ANDREW VHLPX2-42-XXX/A'), antennaDiameterList.push('0.3','0.6'), antennaGainList.push('40.80','46.00');break + case 80: antennaList.push('Radio Waves HPCPE-80', 'Radio Waves HPLP2-80'), antennaDiameterList.push('0.3','0.6'), antennaGainList.push('43.80','50.80');break + } + dispatcher(new UpdateAntennaListAction(antennaList)) + dispatcher(new UpdateAntennaGainAction(antennaGainList)) +} + diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts b/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts index 608367072..edfad052a 100644 --- a/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts @@ -21,7 +21,7 @@ import { combineActionHandler } from '../../../../framework/src/flux/middleware' // ** do not remove ** import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import { IActionHandler } from '../../../../framework/src/flux/action';; -import { UpdateLinkIdAction, UpdateFrequencyAction , UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, updateHideForm, UpdateFslCalculation, UpdateSiteAction, UpdateDistanceAction, isCalculationServerReachableAction, UpdatePolAction, updateAltitudeAction, UpdateAbsorptionLossAction, UpdateWorstMonthRainAction} from '../actions/commonLinkCalculationActions'; +import { UpdateLinkIdAction, UpdateFrequencyAction , UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, updateHideForm, UpdateFslCalculation, UpdateSiteAction, UpdateDistanceAction, isCalculationServerReachableAction, UpdatePolAction, updateAltitudeAction, UpdateAbsorptionLossAction, UpdateWorstMonthRainAction, UpdateEIRPAction, UpdateAntennaAction, UpdateAntennaListAction, UpdateAntennaGainAction, UpdateTxPowerAction, UpdateRxSensitivityAction} from '../actions/commonLinkCalculationActions'; declare module '../../../../framework/src/store/applicationStore' { interface IApplicationStoreState { @@ -55,7 +55,20 @@ export type ILinkCalculationAppStateState= { aglB:number, absorptionWater:number, absorptionOxygen: number, - month: string + month: string, + eirpA: number, + eirpB: number, + antennaGainA: number, + antennaGainB :number, + antennaList:string[], + antennaGainList:string[], + antennaA: string, + antennaB:string, + systemOperatingMargin : number, + txPowerA : string, + txPowerB: string, + rxSensitivityA : string, + rxSensitivityB: string } const initialState: ILinkCalculationAppStateState ={ @@ -80,7 +93,20 @@ const initialState: ILinkCalculationAppStateState ={ aglB:0, absorptionWater:0, absorptionOxygen: 0, - month: '' + month: '', + eirpA: 0, + eirpB: 0, + antennaGainA :0, + antennaGainB :0, + antennaList:[], + antennaGainList:[], + antennaA: '0', + antennaB:'0', + systemOperatingMargin : 0, + txPowerA : '0', + txPowerB: '0', + rxSensitivityA: '0', + rxSensitivityB: '0' } @@ -130,6 +156,25 @@ export const LinkCalculationHandler: IActionHandler<ILinkCalculationAppStateStat else if (action instanceof UpdateWorstMonthRainAction){ state = Object.assign({}, state, {month:action.month}) } + else if (action instanceof UpdateEIRPAction){ + state = Object.assign({}, state, {eirpA:action.eirpA, eirpB:action.eirpB}) + } + else if (action instanceof UpdateAntennaGainAction){ + state = Object.assign({}, state, {antennaGainList:action.antennaGainList}) + } + else if (action instanceof UpdateAntennaListAction){ + state = Object.assign({}, state, {antennaList:action.antennaList}) + } + else if (action instanceof UpdateAntennaAction){ + state = Object.assign({}, state, {antennaA:action.antennaA == null ? state.antennaA : action.antennaA , antennaB: action.antennaB == null? state.antennaB : action.antennaB}) + } + else if (action instanceof UpdateTxPowerAction){ + state = Object.assign({}, state, {txPowerA:action.txPowerA == null ? state.txPowerA : action.txPowerA , txPowerB: action.txPowerB == null? state.txPowerB : action.txPowerB}) + } + else if (action instanceof UpdateRxSensitivityAction){ + state = Object.assign({}, state, {rxSensitivityA:action.rxSensitivityA == null ? state.rxSensitivityA : action.rxSensitivityA , rxSensitivityB: action.rxSensitivityB == null? state.rxSensitivityB : action.rxSensitivityB}) + } + return state } diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss index 35a9b9702..e4b0c7797 100644 --- a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss @@ -1,11 +1,11 @@ -.parent{ +// .parent{ - display: flex; - justify-content: space-evenly; - margin: auto; +// display: flex; +// justify-content: space-evenly; +// margin: auto; -} +//} .input { width: 150px; box-sizing: border-box; @@ -18,56 +18,99 @@ box-sizing: border-box; } +.container1{ + margin-bottom: 15px; -.container-1 { - height: 50vh; - width: 80%; - justify-content: center; - align-items: baseline;; - display: flex; - flex-direction: row; - align-content: space-between; - padding: 20px 40px; - border-radius: 10px; - // box-shadow: 0px 10px 50px #555; - background-color: #ffffff; - // padding-top: 10px; - } - .column1 { - flex-direction: column; - width: 30%; - align-items: flex-end;; - // padding: 2em; +.container1 div{ + display:flex; + flex-direction: row; + + width:100%; + padding-top: 2px; +} + +.container1 div div{ + width:50%; + border-bottom-style: solid; + border-bottom-width: thin; + border-color: silver; +} + +.firstBox div:first-child{ + margin-left: 33.5%; +} + +// .container-1 { +// width: 80%; +// justify-content: center; +// align-items: baseline;; +// display: flex; +// flex-direction: row; +// align-content: space-between; +// padding: 20px 40px; +// border-radius: 10px; +// // box-shadow: 0px 10px 50px #555; +// background-color: #ffffff; +// // padding-top: 10px; + +// } + + // .column1 { + // flex-direction: column; + // width: 30%; + // align-items: flex-end;; + // // padding: 2em; - } - .column1 div { - margin-top: 10px; - // align-items: space-between; - // flex-wrap: wrap; - border-bottom-style: solid; - border-bottom-width: thin; - border-color: silver; - } - .middlecolumn{ + // } + // .column1 div { + // margin-top: 10px; + // // align-items: space-between; + // // flex-wrap: wrap; + // border-bottom-style: solid; + // border-bottom-width: thin; + // border-color: silver; + // } + // .middlecolumn{ - flex-direction: column; - flex-grow: 1; - // padding: 10px 10px; - } + // flex-direction: column; + // flex-grow: 1; + // // padding: 10px 10px; + // } - .middlecolumn div{ - margin-top: 10px; - border-bottom-style: solid; - border-bottom-width: thin; - border-color: silver; - } + // .middlecolumn div{ + // margin-top: 10px; + // border-bottom-style: solid; + // border-bottom-width: thin; + // border-color: silver; + // } - .column2 { - margin-left: 200px; - } - .column2 div{ - margin-top: 10px; + // .column2 { + // margin-left: 200px; + // } + // .column2 div{ + // margin-top: 10px; - }
\ No newline at end of file + // } + + .antennaContainer{ + margin-bottom: 15px; + background-color: rgb(184, 181, 181); + + } + .antennaContainer div { + display:flex; + flex-direction: row; + + width:100%; + padding-top: 2px; +} +.antennaContainer div div{ + + width:50%; + +} +.antennaFont{ + font-family: "Lucida Console"; +}
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx index 61a700c71..063926269 100644 --- a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx @@ -24,10 +24,11 @@ import { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip, Checkbox, Ta import './Style.scss' import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; -import { UpdateFrequencyAction, UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, UpdateFslCalculation, isCalculationServerReachableAction, UpdatePolAction, UpdateDistanceAction, updateAltitudeAction, UpdateAbsorptionLossAction, UpdateWorstMonthRainAction } from "../actions/commonLinkCalculationActions"; +import { UpdateFrequencyAction, UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, UpdateFslCalculation, isCalculationServerReachableAction, UpdatePolAction, UpdateDistanceAction, updateAltitudeAction, UpdateAbsorptionLossAction, UpdateWorstMonthRainAction, updateAntennaList, UpdateAntennaAction, UpdateRadioAttributesAction, UpdateTxPowerAction, UpdateRxSensitivityAction } from "../actions/commonLinkCalculationActions"; import { faPlaneArrival, faAlignCenter } from "@fortawesome/free-solid-svg-icons"; import ConnectionInfo from '../components/connectionInfo' import { red } from "@material-ui/core/colors"; +import { Dvr } from "@material-ui/icons"; @@ -41,33 +42,44 @@ const mapProps = (state: IApplicationStoreState) => ({ rainAtt: state.linkCalculation.calculations.rainAtt, rainVal: state.linkCalculation.calculations.rainVal, formView: state.linkCalculation.calculations.formView, - fsl:state.linkCalculation.calculations.fsl, + fsl: state.linkCalculation.calculations.fsl, siteA: state.linkCalculation.calculations.siteA, siteB: state.linkCalculation.calculations.siteB, distance: state.linkCalculation.calculations.distance, - reachable :state.linkCalculation.calculations.reachable, - polarization:state.linkCalculation.calculations.polarization, - amslA:state.linkCalculation.calculations.amslA, - amslB:state.linkCalculation.calculations.amslB, - aglA:state.linkCalculation.calculations.aglA, - aglB:state.linkCalculation.calculations.aglB, - absorptionOxygen : state.linkCalculation.calculations.absorptionOxygen, - absorptionWater : state.linkCalculation.calculations.absorptionWater, - month : state.linkCalculation.calculations.month + reachable: state.linkCalculation.calculations.reachable, + polarization: state.linkCalculation.calculations.polarization, + amslA: state.linkCalculation.calculations.amslA, + amslB: state.linkCalculation.calculations.amslB, + aglA: state.linkCalculation.calculations.aglA, + aglB: state.linkCalculation.calculations.aglB, + absorptionOxygen: state.linkCalculation.calculations.absorptionOxygen, + absorptionWater: state.linkCalculation.calculations.absorptionWater, + month: state.linkCalculation.calculations.month, + eirpSiteA: state.linkCalculation.calculations.eirpA, + eirpSiteB: state.linkCalculation.calculations.eirpB, + antennaGainA: state.linkCalculation.calculations.antennaGainA, + antennaGainB: state.linkCalculation.calculations.antennaGainB, + antennaList: state.linkCalculation.calculations.antennaList, + antennaGainList: state.linkCalculation.calculations.antennaGainList, + antennaA: state.linkCalculation.calculations.antennaA, + antennaB: state.linkCalculation.calculations.antennaB, + systemOperatingMargin : state.linkCalculation.calculations.systemOperatingMargin + }); -const BASE_URL="/topology/linkcalculator" +const BASE_URL = "/topology/linkcalculator" const mapDispatch = (dispatcher: IDispatcher) => ({ updateFrequency: (frequency: number) => { - dispatcher.dispatch(new UpdateFrequencyAction(frequency)) + dispatcher.dispatch(new UpdateFrequencyAction(frequency)) + dispatcher.dispatch(updateAntennaList(frequency)) }, updateLatLon: (Lat1: number, Lon1: number, Lat2: number, Lon2: number) => { dispatcher.dispatch(new UpdateLatLonAction(Lat1, Lon1, Lat2, Lon2)) }, - + updateRainValue: (rainVal: number) => { dispatcher.dispatch(new UpdateRainValAction(rainVal)) }, @@ -80,53 +92,59 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ dispatcher.dispatch(new UpdateRainAttAction(rainAtt)) }, - - FSL :(free:number)=> { - dispatcher.dispatch(new UpdateFslCalculation (free)) - }, - UpdateConectivity : (reachable:boolean) => { - dispatcher.dispatch (new isCalculationServerReachableAction (reachable)) + FSL: (free: number) => { + dispatcher.dispatch(new UpdateFslCalculation(free)) }, - updatePolarization :(polarization:any)=>{ - dispatcher.dispatch (new UpdatePolAction(polarization)) + UpdateConectivity: (reachable: boolean) => { + dispatcher.dispatch(new isCalculationServerReachableAction(reachable)) }, - updateAutoDistance : (distance:number)=>{ - dispatcher.dispatch (new UpdateDistanceAction(distance)) + updatePolarization: (polarization: any) => { + dispatcher.dispatch(new UpdatePolAction(polarization)) }, - UpdateAbsorption : (OxLoss:number , WaterLoss:number) => { - dispatcher.dispatch (new UpdateAbsorptionLossAction (OxLoss, WaterLoss)) + updateAutoDistance: (distance: number) => { + dispatcher.dispatch(new UpdateDistanceAction(distance)) }, - // UpdateWorstMonth : (worstmonth:boolean) => { - // dispatcher.dispatch (new UpdateWorstMonthAction(worstmonth)) - // }, - - UpdateWorstMonthRain : (month:string) => { - dispatcher.dispatch (new UpdateWorstMonthRainAction(month)) - } + UpdateAbsorption: (OxLoss: number, WaterLoss: number) => { + dispatcher.dispatch(new UpdateAbsorptionLossAction(OxLoss, WaterLoss)) + }, + UpdateWorstMonthRain: (month: string) => { + dispatcher.dispatch(new UpdateWorstMonthRainAction(month)) + }, + UpdateAntenas: (antennaA: string | null, antennaB: string | null) => { + dispatcher.dispatch(new UpdateAntennaAction(antennaA, antennaB)) + }, + UpdateRadioAttributes :(som: number, eirpA: number, eirpB: number)=>{ + dispatcher.dispatch(new UpdateRadioAttributesAction(som,eirpA, eirpB)) + }, + UpdateTxPower :(txPowerA: string | null, txPowerB: string | null)=>{ + dispatcher.dispatch(new UpdateTxPowerAction(txPowerA, txPowerB)) + }, + UpdateRxSensitivity :(rxSensitivityA : string | null, rxSensitivityB : string | null)=>{ + dispatcher.dispatch(new UpdateRxSensitivityAction(rxSensitivityA, rxSensitivityB)) + } }); type linkCalculationProps = Connect<typeof mapProps, typeof mapDispatch>; interface initialState { - rainMethodDisplay: boolean, - absorptionMethod : string; + rainMethodDisplay: boolean, + absorptionMethod: string; horizontalBoxChecked: boolean, - latitude1Error: string, - longitude1Error:string - latitude2Error: string, - longitude2Error:string, - frequencyError: string, - rainMethodError: string, - attenuationMethodError : string, - worstmonth : boolean, - showWM : string - - + latitude1Error: string, + longitude1Error: string + latitude2Error: string, + longitude2Error: string, + frequencyError: string, + rainMethodError: string, + antennaTypeError: string, + attenuationMethodError: string, + worstmonth: boolean, + showWM: string, } class LinkCalculation extends React.Component<linkCalculationProps, initialState> { @@ -135,40 +153,41 @@ class LinkCalculation extends React.Component<linkCalculationProps, initialState this.state = { rainMethodDisplay: false, horizontalBoxChecked: true, - absorptionMethod : '0', + absorptionMethod: '0', latitude1Error: '', - longitude1Error:'', + longitude1Error: '', latitude2Error: '', - longitude2Error:'', + longitude2Error: '', frequencyError: '', rainMethodError: '', - attenuationMethodError : '', - worstmonth : false, - showWM: '' - }; - } - - updateAutoDistance = async (lat1: number, lon1: number, lat2: number, lon2: number)=>{ - const result = await fetch(BASE_URL+'/distance/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2) - const json = await result.json() - return json.distanceInKm - } + attenuationMethodError: '', + antennaTypeError: '', + worstmonth: false, + showWM: '', + }; + } + + updateAutoDistance = async (lat1: number, lon1: number, lat2: number, lon2: number) => { + const result = await fetch(BASE_URL + '/distance/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2) + const json = await result.json() + return json.distanceInKm + } + + updateLatLon = (e: any) => { + + e.target.id == 'Lat1' ? this.props.updateLatLon(e.target.value, this.props.lon1, this.props.lat2, this.props.lon2) : null + e.target.id == 'Lon1' ? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, this.props.lon2) : null + e.target.id == 'Lat2' ? this.props.updateLatLon(this.props.lat1, this.props.lon1, e.target.value, this.props.lon2) : null + e.target.id == 'Lon2' ? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, e.target.value) : null - updateLatLon = (e:any) => { - - e.target.id== 'Lat1'? this.props.updateLatLon(e.target.value, this.props.lon1, this.props.lat2, this.props.lon2) : null - e.target.id== 'Lon1'? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, this.props.lon2) : null - e.target.id== 'Lat2'? this.props.updateLatLon(this.props.lat1, this.props.lon1, e.target.value, this.props.lon2) : null - e.target.id== 'Lon2'? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, e.target.value) : null - } - updatePoli = (val: string) =>{ + updatePoli = (val: string) => { - this.setState({horizontalBoxChecked: !this.state.horizontalBoxChecked}); + this.setState({ horizontalBoxChecked: !this.state.horizontalBoxChecked }); this.props.updatePolarization(val); - + } LatLonToDMS = (value: number, isLon: boolean = false) => { @@ -187,266 +206,359 @@ class LinkCalculation extends React.Component<linkCalculationProps, initialState } } - rainAttCal = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any, distance: number, polarization : string, worstmonth:boolean) => { - if(!worstmonth){ - fetch(BASE_URL+'/rain/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + frequency+ '/'+ distance + '/' + polarization.toUpperCase()) - .then(res => res.json()) - .then(result => { this.props.UpdateRainAtt(result.rainAttenuation) ; this.props.updateRainValue(result.rainFall.rainrate)}) + rainAttCal = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any, distance: number, polarization: string, worstmonth: boolean) => { + if (!worstmonth) { + fetch(BASE_URL + '/rain/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase()) + .then(res => res.json()) + .then(result => { this.props.UpdateRainAtt(result.rainAttenuation); this.props.updateRainValue(result.rainFall.rainrate) }) } else { - fetch(BASE_URL+'/rain/worstmonth/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + frequency+ '/'+ distance + '/' + polarization.toUpperCase()) - .then(res => res.json()) - .then(result => { this.props.UpdateRainAtt(result.rainAttenuation) ; this.props.updateRainValue(result.rainFall.rainrate); this.props.UpdateWorstMonthRain (result.rainFall.period); this.setState({showWM: '- Wm is : '})}) + fetch(BASE_URL + '/rain/worstmonth/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase()) + .then(res => res.json()) + .then(result => { this.props.UpdateRainAtt(result.rainAttenuation); this.props.updateRainValue(result.rainFall.rainrate); this.props.UpdateWorstMonthRain(result.rainFall.period); this.setState({ showWM: '- Wm is : ' }) }) } } - manualRain = (rainfall: number, frequency: number, distance:number, polarization : string) => { - fetch(BASE_URL+'/rain/' + rainfall + '/' + frequency + '/' + distance+ '/' + polarization.toUpperCase()) + manualRain = (rainfall: number, frequency: number, distance: number, polarization: string) => { + fetch(BASE_URL + '/rain/' + rainfall + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase()) .then(res => res.json()) .then(result => { this.props.specificRain(result.rainAttenuation) }) - } + } + + FSL = (distance: number, frequency: number) => { + fetch(BASE_URL + '/fsl/' + distance + '/' + frequency) + .then(res => res.json()) + .then(result => { this.props.FSL(result.fspl) }) + } - FSL = (distance:number, frequency:number) => { - fetch(BASE_URL+'/fsl/' + distance + '/' + frequency) - .then(res=>res.json()) - .then (result => {this.props.FSL(result.fspl)}) + AbsorptionAtt = (lat1: number, lon1: number, lat2: number, lon2: number, distance: number, frequency: number, worstmonth: boolean, absorptionMethod: string) => { + if (!worstmonth) { + fetch(BASE_URL + '/absorption/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' + absorptionMethod) + .then(res => res.json()) + .then(result => { this.props.UpdateAbsorption(result.oxygenLoss, result.waterLoss) }) } - - AbsorptionAtt =(lat1: number, lon1: number, lat2: number, lon2: number, distance:number, frequency:number, worstmonth:boolean, absorptionMethod : string) => { - if(!worstmonth) - { - fetch(BASE_URL+'/absorption/annual/' +lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' +absorptionMethod) - .then(res=>res.json()) - .then (result => {this.props.UpdateAbsorption(result.oxygenLoss, result.waterLoss)}) - } - else { - fetch(BASE_URL+'/absorption/annual/' +lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' +absorptionMethod) - .then(res=>res.json()) - .then (result => {this.props.UpdateAbsorption(result.oxygenLoss, result.waterLoss)}) - } + else { + fetch(BASE_URL + '/absorption/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' + absorptionMethod) + .then(res => res.json()) + .then(result => { this.props.UpdateAbsorption(result.oxygenLoss, result.waterLoss) }) } + } + + linkBudget = (antennaA: string, antennaB: string, transmissionPowerA: number, transmissionPowerB: number) => { + fetch(BASE_URL + '/linkbudget/' + antennaA + '/' + antennaB + '/' + transmissionPowerA + '/' + transmissionPowerB) + .then(res=>res.json()) + .then(result => {this.props.UpdateRadioAttributes(result.systemOperatingMargin, result.eirpA, result.eirpB)}) + } + + formValid = () => { + + this.props.lat1 === 0 ? this.setState({ latitude1Error: 'Enter a number between -90 to 90' }) : null + this.props.lat2 === 0 ? this.setState({ latitude2Error: 'Enter a number between -90 to 90' }) : null + this.props.lon1 === 0 ? this.setState({ longitude1Error: 'Enter a number between -180 to 180' }) : null + this.props.lon2 === 0 ? this.setState({ longitude2Error: 'Enter a number between -180 to 180' }) : null + this.props.frequency === 0 ? this.setState({ frequencyError: 'Select a frequency' }) : this.setState({ frequencyError: '' }) + + this.state.rainMethodDisplay === null && this.props.rainVal === 0 ? this.setState({ rainMethodError: 'Select the rain method' }) : this.setState({ rainMethodError: '' }) + this.state.absorptionMethod === '0' ? this.setState({ attenuationMethodError: 'Select the attenuation method' }) : this.setState({ attenuationMethodError: '' }) + console.log(this.state); + console.log(this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !== 0 && this.props.frequency !== 0 && this.state.rainMethodError === '' && this.state.attenuationMethodError === ''); + + return this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !== 0 && this.props.frequency !== 0 && this.state.rainMethodError === '' && this.state.attenuationMethodError === ''; + + } + + - formValid = () => { - - this.props.lat1 === 0 ? this.setState({latitude1Error: 'Enter a number between -90 to 90'}) : null - this.props.lat2 === 0 ? this.setState({latitude2Error: 'Enter a number between -90 to 90'}) : null - this.props.lon1 === 0 ? this.setState({longitude1Error: 'Enter a number between -180 to 180' }) : null - this.props.lon2 === 0 ? this.setState({longitude2Error: 'Enter a number between -180 to 180' }) : null - this.props.frequency === 0 ? this.setState({frequencyError: 'Select a frequency' }) : this.setState({frequencyError: ''}) - - this.state.rainMethodDisplay === null && this.props.rainVal === 0 ? this.setState({rainMethodError: 'Select the rain method'}) : this.setState({rainMethodError: ''}) - this.state.absorptionMethod === '0' ? this.setState({attenuationMethodError: 'Select the attenuation method'}) : this.setState({attenuationMethodError: ''}) - console.log(this.state); - console.log(this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !==0 && this.props.frequency!==0 && this.state.rainMethodError==='' && this.state.attenuationMethodError=== ''); - - return this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !==0 && this.props.frequency!==0 && this.state.rainMethodError==='' && this.state.attenuationMethodError=== ''; - - } - - - buttonHandler = async () => { - - if (this.formValid()) { + + if (this.formValid()) { this.props.updateAutoDistance(await this.updateAutoDistance(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2)) this.FSL(this.props.distance, this.props.frequency) - if (this.state.worstmonth===false) { - this.setState({showWM : ' '}) + if (this.state.worstmonth === false) { + this.setState({ showWM: ' ' }) this.props.UpdateWorstMonthRain('') - this.AbsorptionAtt (this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth, this.state.absorptionMethod) + this.AbsorptionAtt(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth, this.state.absorptionMethod) - if (this.state.rainMethodDisplay === true){ + if (this.state.rainMethodDisplay === true) { - this.manualRain(this.props.rainVal, this.props.frequency, this.props.distance, this.props.polarization!); + this.manualRain(this.props.rainVal, this.props.frequency, this.props.distance, this.props.polarization!); } else { // this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.state.worstmonth) this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization!, this.state.worstmonth); } - } - else { - this.AbsorptionAtt (this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth, this.state.absorptionMethod) + } + else { + this.AbsorptionAtt(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth, this.state.absorptionMethod) - // this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.state.worstmonth) + // this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.state.worstmonth) - this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization!, this.state.worstmonth); + this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization!, this.state.worstmonth); } } - else console.log('form is not valid') + else console.log('form is not valid') } componentDidMount = () => { - fetch (BASE_URL+'/fsl/1/1') - .then(res => {if (res.ok) { this.props.UpdateConectivity(true)}else {this.props.UpdateConectivity(false)} }) - .catch (res => {this.props.UpdateConectivity(false)} ) + fetch(BASE_URL + '/fsl/1/1') + .then(res => { if (res.ok) { this.props.UpdateConectivity(true) } else { this.props.UpdateConectivity(false) } }) + .catch(res => { this.props.UpdateConectivity(false) }) } - handleChange =(e:any) => { - - switch (e.target.id){ - case 'Lat1' : if ( e.target.value >90 || e.target.value<-90 ) - { this.setState({latitude1Error: 'Enter a number between -90 to 90'})} - else {this.updateLatLon(e) - this.setState({latitude1Error: ''}) } - break; - case 'Lat2' : if ( e.target.value >90 || e.target.value<-90 ) - { this.setState({latitude2Error: 'Enter a number between -90 to 90'})} - else {this.updateLatLon(e) - this.setState({latitude2Error: ''}) } - break; - case 'Lon1' : if ( e.target.value >180 || e.target.value<-180 ) - { this.setState({longitude1Error: 'Enter a number between -180 to 180'})} - else {this.updateLatLon(e) - this.setState({longitude1Error: ''}) } - break; - case 'Lon2' : if ( e.target.value >180 || e.target.value<-180 ) - { this.setState({longitude2Error: 'Enter a number between -180 to 180'})} - else {this.updateLatLon(e) - this.setState({longitude2Error: ''}) } - break; - + handleChange = (e: any) => { + + switch (e.target.id) { + case 'Lat1': if (e.target.value > 90 || e.target.value < -90) { this.setState({ latitude1Error: 'Enter a number between -90 to 90' }) } + else { + this.updateLatLon(e) + this.setState({ latitude1Error: '' }) + } + break; + case 'Lat2': if (e.target.value > 90 || e.target.value < -90) { this.setState({ latitude2Error: 'Enter a number between -90 to 90' }) } + else { + this.updateLatLon(e) + this.setState({ latitude2Error: '' }) + } + break; + case 'Lon1': if (e.target.value > 180 || e.target.value < -180) { this.setState({ longitude1Error: 'Enter a number between -180 to 180' }) } + else { + this.updateLatLon(e) + this.setState({ longitude1Error: '' }) + } + break; + case 'Lon2': if (e.target.value > 180 || e.target.value < -180) { this.setState({ longitude2Error: 'Enter a number between -180 to 180' }) } + else { + this.updateLatLon(e) + this.setState({ longitude2Error: '' }) + } + break; + } } - render() { + render() { return ( - - <div > - - {!this.props.formView && - - <div className = 'parent'> - - <div >Site A - <form > - <label>Latitude: <input aria-label="site-a-latitude-input" className={this.state.latitude1Error.length>0 ? 'error' : 'input'} id='Lat1' type='number' onChange={(e: any) => {this.handleChange(e)} }/></label> - <div style={{fontSize:12, color:'red'}}> {this.state.latitude1Error} </div></form> - <form><label>Longitude: <input aria-label="site-a-longitude-input" className={this.state.longitude1Error.length>0 ? 'error' : 'input'} id='Lon1' type='number' onChange={(e: any) => this.handleChange(e) } /></label><div style={{fontSize:12, color:'red'}}> {this.state.longitude1Error} </div> - </form> - </div> - - <div>Site B - <form> - <label>Latitude: <input aria-label="site-b-latitude-input" className={this.state.latitude2Error.length>0 ? 'error' : 'input'} id='Lat2' type='number' onChange={(e: any) => {this.handleChange(e) }} /></label><div style={{fontSize:12, color:'red'}}> {this.state.latitude2Error} </div></form> - <form><label>Longitude: <input aria-label="site-b-longitude-input" className={this.state.longitude2Error.length>0 ? 'error' : 'input'} id='Lon2' type='number' onChange={(e: any) => {this.handleChange(e) } }/></label><div style={{fontSize:12, color:'red'}}> {this.state.longitude2Error} </div></form> - </div> - + + <div > + + {!this.props.formView && + + <div className='container1'> + <div className='firstBox'> + <div>SiteA</div> + <div>SiteB</div> + </div> + + <div className='firstBox'> + <div> + <form > + <label>Latitude: <input aria-label="site-a-latitude-input" className={this.state.latitude1Error.length > 0 ? 'error' : 'input'} id='Lat1' type='number' onChange={(e: any) => { this.handleChange(e) }} /></label> + <div style={{ fontSize: 12, color: 'red' }}> {this.state.latitude1Error} </div> + </form></div> + <div> + <form> + <label>Latitude: <input aria-label="site-b-latitude-input" className={this.state.latitude2Error.length > 0 ? 'error' : 'input'} id='Lat2' type='number' onChange={(e: any) => { this.handleChange(e) }} /></label><div style={{ fontSize: 12, color: 'red' }}> {this.state.latitude2Error} </div> + </form></div> + </div> + + <div className='firstBox'> + <div> + <form><label>Longitude: <input aria-label="site-a-longitude-input" className={this.state.longitude1Error.length > 0 ? 'error' : 'input'} id='Lon1' type='number' onChange={(e: any) => this.handleChange(e)} /></label><div style={{ fontSize: 12, color: 'red' }}> {this.state.longitude1Error} </div> + </form></div> + <div> + <form><label>Longitude: <input aria-label="site-b-longitude-input" className={this.state.longitude2Error.length > 0 ? 'error' : 'input'} id='Lon2' type='number' onChange={(e: any) => { this.handleChange(e) }} /></label><div style={{ fontSize: 12, color: 'red' }}> {this.state.longitude2Error} </div></form> + </div> + </div> + + + </div> } - <div className='container-1'> - <div>{<form><input aria-label="annual" type='checkbox' id='Annual' value ="Annual" checked= {this.state.worstmonth===false} onClick= {(e: any) => this.setState ({worstmonth: false})}></input>Annual - <input aria-label="worst-month" style={{marginLeft:10}} type='checkbox' id='Worst Month' value ="Worst" checked= {this.state.worstmonth===true} onClick= {(e:any)=>this.setState ({worstmonth: true})}></input>WM</form>}</div> - - - <div className='column1'> - <div> </div> - {(this.props.siteA.length>0 || this.props.siteB.length>0) && <div >Site Name</div>} - <div>Latitude</div> - <div>Longitude</div> - <div>Azimuth</div> - <div>Average Mean Sea Level</div> - <div>Antenna Height Above Ground</div> - <div>Distance</div> - <div style={{marginTop:20}}>Polarization</div> - <div style={{marginTop:20}}>Frequency</div> - <div>Free Space Loss</div> - <div style={{marginTop:10}}>Rain Model</div> - <div style={{marginTop:20}}>Rainfall Rate</div> - <div>Rain Loss</div> - <div style={{marginTop:18}}>Absorption Model</div> - <div>Oxygen Specific Attenuation</div> - <div>Water Vapor Specific Attenuation</div> + <div className='container1'> + <div >{<form><input aria-label="annual" type='checkbox' id='Annual' value="Annual" checked={this.state.worstmonth === false} onClick={(e: any) => this.setState({ worstmonth: false })}></input>Annual + <input aria-label="worst-month" style={{ marginLeft: 10 }} type='checkbox' id='Worst Month' value="Worst" checked={this.state.worstmonth === true} onClick={(e: any) => this.setState({ worstmonth: true })}></input>WM</form>} </div> - - - <div className='middlecolumn'> - <div >Site A</div> - {this.props.siteA.length>0 &&<div> {this.props.siteA }</div>} - <div aria-label="site-a-latitude-dms"> {this.props.lat1 && this.LatLonToDMS(this.props.lat1)}</div> - <div aria-label="site-a-longitude-dms">{this.props.lon1 && this.LatLonToDMS(this.props.lon1)}</div> - <div>0</div> - <div aria-label="site-a-amsl">{this.props.amslA.toFixed(2)} m</div> - <div aria-label="site-a-antenna-amsl">{this.props.aglA.toFixed(2)} m</div> - - - <div className='column2'> - <div aria-label="distance-between-sites">{this.props.distance?.toFixed(3)} km</div> - <div>{<form><input aria-label="polarization-horizontal" type='checkbox' id='Horizontal' value ="Horizontal" checked= {this.props.polarization==='Horizontal'} onClick= {(e: any) => this.props.updatePolarization(e.target.value)}></input>Horizontal - <input aria-label="polarization-vertical" style={{marginLeft:10}} type='checkbox' id='Vertical' value ="Vertical" checked= {this.props.polarization==='Vertical'} onClick= {(e:any)=>{this.props.updatePolarization(e.target.value)}}></input>Vertical</form>}</div> - - <div> {<select aria-label="select-frequency-in-ghz" className={this.state.frequencyError.length>0 ? 'error' : 'input'} onChange={(e) => { this.props.updateFrequency(Number(e.target.value)); e.target.value==='0'? this.setState({frequencyError: 'select a frequency'}): this.setState({frequencyError:''})}}> - - <option value='0' aria-label="none-value" >Select Freq</option> - <option value='7' aria-label="7" >7 GHz</option> - <option value='11' aria-label="11" >11 GHz</option> - <option value='15' aria-label="15" >15 GHz</option> - <option value='23' aria-label="23">23 GHz</option> - <option value='26' aria-label="26">26 GHz</option> - <option value='28' aria-label="28">28 GHz</option> - <option value='38' aria-label="38">38 GHz</option> - <option value='42' aria-label="42">42 GHz</option> - <option value='80' aria-label="80">80 GHz</option> - </select>} <div style={{fontSize:12, color:'red'}}> {this.state.frequencyError} </div> </div> - - <div aria-label="fspl-value">{this.props.fsl.toFixed(3)} dB</div> - - <div> {<select aria-label="select-rain-method" className={this.state.rainMethodError.length>0 ? 'error' : 'input'} onChange = {(e) => {e.target.value === 'itu' ? this.setState({ rainMethodDisplay: false}):this.setState({ rainMethodDisplay: true}); e.target.value==='0'? this.setState({rainMethodError: 'select a Rain model'}): this.setState({rainMethodError:''}) }}> - <option value='0' aria-label="none-value" >Select Rain Method</option> - <option value='itu' aria-label="itur8377">ITU-R P.837-7</option> - <option value='manual' aria-label="manual-entry">Specific Rain</option> - </select>} <div style={{fontSize:12,color:'red'}}>{this.state.rainMethodError}</div> - </div> + <div className='firstBox'> + <div>Site A</div> + <div>Site B</div> + </div> + {/* <div> </div> */} + <div> + {(this.props.siteA.length > 0 || this.props.siteB.length > 0) && <div >Site Name</div>} + <div> {this.props.siteA}</div> + <div> {this.props.siteB}</div> + </div> + <div> + <div>Latitude</div> + <div aria-label="site-a-latitude-dms"> {this.props.lat1 && this.LatLonToDMS(this.props.lat1)}</div> + <div aria-label="site-b-latitude-dms"> {this.props.lat2 && this.LatLonToDMS(this.props.lat2)}</div> + + </div> + <div> + <div>Longitude</div> + <div aria-label="site-a-longitude-dms">{this.props.lon1 && this.LatLonToDMS(this.props.lon1)}</div> + <div aria-label="site-b-longitude-dms">{this.props.lon2 && this.LatLonToDMS(this.props.lon2)}</div> + </div> + <div> + <div>Azimuth</div> + <div>0</div> + <div>0</div> + </div> + <div> + <div>Average Mean Sea Level</div> + <div aria-label="site-a-amsl">{this.props.amslA.toFixed(2)} m</div> + <div aria-label="site-b-amsl">{this.props.amslB.toFixed(2)} m</div> + </div> + <div> + <div>Antenna Height Above Ground</div> + <div aria-label="site-a-antenna-amsl">{this.props.aglA.toFixed(2)} m</div> + <div aria-label="site-b-antenna-amsl">{this.props.aglB.toFixed(2)} m</div> + </div> + <div> + <div >Distance</div> + <div aria-label="distance-between-sites">{this.props.distance?.toFixed(3)} km</div> + </div> + <div> + <div >Polarization</div> + <div >{<form><input aria-label="polarization-horizontal" type='checkbox' id='Horizontal' value="Horizontal" checked={this.props.polarization === 'Horizontal'} onClick={(e: any) => this.props.updatePolarization(e.target.value)}></input>Horizontal + <input aria-label="polarization-vertical" style={{ marginLeft: 10 }} type='checkbox' id='Vertical' value="Vertical" checked={this.props.polarization === 'Vertical'} onClick={(e: any) => { this.props.updatePolarization(e.target.value) }}></input>Vertical</form>}</div> + </div> + <div> + <div style={{ marginTop: 5 }}>Frequency</div> + <div style={{ marginTop: 5 }}> {<select aria-label="select-frequency-in-ghz" className={this.state.frequencyError.length > 0 ? 'error' : 'input'} onChange={(e) => { this.props.updateFrequency(Number(e.target.value)); e.target.value === '0' ? this.setState({ frequencyError: 'select a frequency' }) : this.setState({ frequencyError: '' }); this.props.UpdateAntenas('0', '0') }}> + + <option value='0' aria-label="none-value" >Select Freq</option> + <option value='7' aria-label="7" >7 GHz</option> + <option value='11' aria-label="11" >11 GHz</option> + <option value='15' aria-label="15" >15 GHz</option> + <option value='23' aria-label="23">23 GHz</option> + <option value='26' aria-label="26">26 GHz</option> + <option value='28' aria-label="28">28 GHz</option> + <option value='38' aria-label="38">38 GHz</option> + <option value='42' aria-label="42">42 GHz</option> + <option value='80' aria-label="80">80 GHz</option> + </select>} <div style={{ fontSize: 12, color: 'red' }}> {this.state.frequencyError} </div> </div> + </div> + <div> + <div>Free Space Loss</div> + <div aria-label="fspl-value">{this.props.fsl.toFixed(3)} dB</div> + </div> + <div> + <div>Rain Model</div> + <div> {<select aria-label="select-rain-method" className={this.state.rainMethodError.length > 0 ? 'error' : 'input'} onChange={(e) => { e.target.value === 'itu' ? this.setState({ rainMethodDisplay: false }) : this.setState({ rainMethodDisplay: true }); e.target.value === '0' ? this.setState({ rainMethodError: 'select a Rain model' }) : this.setState({ rainMethodError: '' }) }}> + <option value='0' aria-label="none-value" >Select Rain Method</option> + <option value='itu' aria-label="itur8377">ITU-R P.837-7</option> + <option value='manual' aria-label="manual-entry">Specific Rain</option> + </select>} <div style={{ fontSize: 12, color: 'red' }}>{this.state.rainMethodError}</div> + </div> + </div> + <div> + <div>Rainfall Rate</div> <div> {<form><input aria-label="rain-value" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { this.props.updateRainValue(Number(e.target.value)) }} - value={this.props.rainVal} disabled={this.state.rainMethodDisplay === false ? true : false}> - </input> mm/hr {this.state.showWM} {this.props.month}</form> } </div> - <div aria-label="rain-attenuation-value">{this.props.rainAtt.toFixed(3)} dB</div> - - <div> {<select aria-label="select-absorption-method" className={this.state.attenuationMethodError.length>0 ? 'error' : 'input'} onChange = {(e) => { if (e.target.value!== ''){ this.setState({absorptionMethod : e.target.value}); this.setState({attenuationMethodError:''}) }}}> - <option value='0' aria-label="none-value" >Select Absorption Method</option> - <option value='ITURP67612' aria-label="iturp67612" >ITU-R P.676-12</option> - <option value='ITURP67611' aria-label="iturp67611" >ITU-R P.676-11</option> - <option value='ITURP67610' aria-label="iturp67610" >ITU-R P.676-10</option> - </select>} <div style={{fontSize:12,color:'red'}}>{this.state.attenuationMethodError}</div> - </div> - <div aria-label="absorption-oxygen-value">{this.props.absorptionOxygen.toFixed(3)} dB</div> - <div aria-label="absorption-water-value">{this.props.absorptionWater.toFixed(3)} dB</div> - <div>{<button aria-label="calculate-button" style={{color: '#222', fontFamily:'Arial', boxAlign: 'center', display:'inline-block', insetInlineStart: '20' , alignSelf:'center' }} - onClick = {(e) => this.buttonHandler()} >Calculate</button>} </div> + value={this.props.rainVal} disabled={this.state.rainMethodDisplay === false ? true : false}> + </input> mm/hr {this.state.showWM} {this.props.month}</form>} </div> + </div> + <div> + <div>Rain Loss</div> + <div aria-label="rain-attenuation-value">{this.props.rainAtt.toFixed(3)} dB</div> + </div> + <div> + <div>Absorption Model</div> + <div> {<select aria-label="select-absorption-method" className={this.state.attenuationMethodError.length > 0 ? 'error' : 'input'} onChange={(e) => { if (e.target.value !== '') { this.setState({ absorptionMethod: e.target.value }); this.setState({ attenuationMethodError: '' }) } }}> + <option value='0' aria-label="none-value" >Select Absorption Method</option> + <option value='ITURP67612' aria-label="iturp67612" >ITU-R P.676-12</option> + <option value='ITURP67611' aria-label="iturp67611" >ITU-R P.676-11</option> + <option value='ITURP67610' aria-label="iturp67610" >ITU-R P.676-10</option> + </select>} <div style={{ fontSize: 12, color: 'red' }}>{this.state.attenuationMethodError}</div> + </div> + </div> + <div> + <div>Oxygen Specific Attenuation</div> + <div aria-label="absorption-oxygen-value">{this.props.absorptionOxygen.toFixed(3)} dB</div> + </div> + <div> + <div>Water Vapor Specific Attenuation</div> + <div aria-label="absorption-water-value">{this.props.absorptionWater.toFixed(3)} dB</div> + </div> + <div> + <div>System Operating Margin</div> + <div aria-label="system-operating-margin">{this.props.systemOperatingMargin} dB</div> + </div> + <div> + <div>Radio Transmitted Power</div> + <div> {<form><input aria-label="site-a-transmitted-power" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => {if (e.target.value !== '') this.props.UpdateTxPower(e.target.value,null) }} + > + </input> dBm </form>} </div> + <div> {<form><input aria-label="site-b-transmitted-power" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateTxPower(null,e.target.value) }} + > + </input> dBm </form>} </div> + </div> + <div> + <div>RF Receiver Sensitivity</div> + <div> {<form><input aria-label="site-a-receiver-sensitivity" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateRxSensitivity(e.target.value, null) }} + > + </input> dBm </form>} </div> + <div> {<form><input aria-label="site-b-receiver-sensitivity" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateRxSensitivity(null, e.target.value) }} + > + </input> dBm </form>} </div> + </div> + </div> + <div className='antennaContainer'> + <div> + <div></div> + <div className='antennaFont'>Antenna Settings</div> + </div> + <div> + <div>Antenna</div> + + <div> {<select aria-label="site-a-select-antenna" value={this.props.antennaA} style={{ width: 160, height: 22, fontSize: 13 }} className={this.state.antennaTypeError.length > 0 ? 'error' : 'input'} onChange={(e) => { if (e.target.value !== '') { this.props.UpdateAntenas(e.target.value, null); this.setState({ antennaTypeError: '' }) } }}> + <option value='0' aria-label="none-value" >Select Antenna</option> + {this.props.antennaList.map(antenna => <option value={antenna}>{antenna}</option>)} + </select>} <div style={{ fontSize: 12, color: 'red' }}>{this.state.antennaTypeError}</div> + </div> + <div> {<select aria-label="site-b-select-antenna" value={this.props.antennaB} style={{ width: 160, height: 22, fontSize: 13 }} className={this.state.antennaTypeError.length > 0 ? 'error' : 'input'} onChange={(e) => { if (e.target.value !== '') { this.props.UpdateAntenas(null, e.target.value); this.setState({ antennaTypeError: '' }) } }}> + <option value='0' aria-label="none-value" >Select Antenna</option> + {this.props.antennaList.map(antenna => <option value={antenna}>{antenna}</option>)} + </select>} <div style={{ fontSize: 12, color: 'red' }}>{this.state.antennaTypeError}</div> + </div> </div> + <div> + <div>EIRP</div> + <div aria-label="site-a-effective-isotropic-radiated-power">{this.props.eirpSiteA} dBm</div> + <div aria-label="site-b-effective-isotropic-radiated-power">{this.props.eirpSiteB} dBm</div> </div> - <div className= 'middlecolumn'> - <div >Site B</div> - {this.props.siteB.length>0 &&<div> {this.props.siteB}</div>} - <div aria-label="site-b-latitude-dms"> {this.props.lat2 && this.LatLonToDMS(this.props.lat2)}</div> - <div aria-label="site-b-longitude-dms">{this.props.lon2 && this.LatLonToDMS(this.props.lon2)}</div> - <div>0</div> - <div aria-label="site-b-asml">{this.props.amslB.toFixed(2)} m</div> - <div aria-label="site-b-antenna-asml">{this.props.aglB.toFixed(2)} m</div> - - </div> - + <div> + <div>Gain</div> + <div aria-label="site-a-antenna-gain" > {this.props.antennaGainList[this.props.antennaList.indexOf(this.props.antennaA)]} dBi</div> + <div aria-label="site-b-antenna-gain">{this.props.antennaGainList[this.props.antennaList.indexOf(this.props.antennaB)]} dBi</div> + </div> + <div> + <div></div> + <div>{<button aria-label="calculate-button" style={{ color: '#222', fontFamily: 'Arial', boxAlign: 'center', display: 'inline-block', insetInlineStart: '20', alignSelf: 'center' }} + onClick={(e) => this.buttonHandler()} >Calculate</button>} </div> + </div> </div> - + <ConnectionInfo /> - - - - </div> - ) - } - + + + </div> + + ) } +} + export default connect(mapProps, mapDispatch)(LinkCalculation); diff --git a/sdnr/wt/odlux/apps/maintenanceApp/package.json b/sdnr/wt/odlux/apps/maintenanceApp/package.json index d2980f1dc..939044e20 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/package.json +++ b/sdnr/wt/odlux/apps/maintenanceApp/package.json @@ -28,8 +28,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/maintenanceApp/pom.xml b/sdnr/wt/odlux/apps/maintenanceApp/pom.xml index 29eec4bed..e510d2a3b 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/pom.xml +++ b/sdnr/wt/odlux/apps/maintenanceApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/mediatorApp/package.json b/sdnr/wt/odlux/apps/mediatorApp/package.json index 0f0e74673..74fdd33ac 100644 --- a/sdnr/wt/odlux/apps/mediatorApp/package.json +++ b/sdnr/wt/odlux/apps/mediatorApp/package.json @@ -28,8 +28,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/mediatorApp/pom.xml b/sdnr/wt/odlux/apps/mediatorApp/pom.xml index 9d593dc90..ffc09ca38 100644 --- a/sdnr/wt/odlux/apps/mediatorApp/pom.xml +++ b/sdnr/wt/odlux/apps/mediatorApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/minimumApp/package.json b/sdnr/wt/odlux/apps/minimumApp/package.json index bcda2fb58..6c4193310 100644 --- a/sdnr/wt/odlux/apps/minimumApp/package.json +++ b/sdnr/wt/odlux/apps/minimumApp/package.json @@ -27,8 +27,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/minimumApp/pom.xml b/sdnr/wt/odlux/apps/minimumApp/pom.xml index dd9504be1..02a0a8dac 100644 --- a/sdnr/wt/odlux/apps/minimumApp/pom.xml +++ b/sdnr/wt/odlux/apps/minimumApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/README.md b/sdnr/wt/odlux/apps/networkMapApp/icons/README.md index 85c75c4e9..b26fbc29b 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/README.md +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/README.md @@ -19,7 +19,7 @@ Copyright of icons is as followes: */ --> -datacenter.png, lamp.png and customize.png with all variations (different colors) +datacenter.png and lamp.png Taken from MS Word diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/apartment.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/apartment.png.d.ts index 9f956f813..bf398f5a4 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/apartment.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/apartment.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const apartment: string; export default apartment;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/customize.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/customize.png.d.ts index 16327f5af..7bcffb2ca 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/customize.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/customize.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const customize: string; export default customize;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/datacenter.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenter.png.d.ts index dc7019766..a58a9f5af 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/datacenter.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenter.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const datacenter: string; export default datacenter;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts index 74836be8d..33f3061e2 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const datacenterred: string; export default datacenterred;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts index e341c5f95..b5c4f19d9 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const factory: string; export default factory;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts index 317ff7e85..1fac0a943 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const factoryRed: string; export default factoryRed;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/lamp.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/lamp.png.d.ts index eeedc7fcd..9634b1275 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/lamp.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/lamp.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const lamp: string; export default lamp;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts index b053df0b8..12a8f91cb 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts @@ -1,20 +1,2 @@ -/** - * ============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========================================================================== - */ - declare const lampred: string; export default lampred;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/package.json b/sdnr/wt/odlux/apps/networkMapApp/package.json index cde312ce3..160537045 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/package.json +++ b/sdnr/wt/odlux/apps/networkMapApp/package.json @@ -30,8 +30,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/networkMapApp/pom.xml b/sdnr/wt/odlux/apps/networkMapApp/pom.xml index 8284149e0..76da05dc1 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/pom.xml +++ b/sdnr/wt/odlux/apps/networkMapApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts b/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts index 34cf10915..a9bea4fc2 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts @@ -25,6 +25,7 @@ import { link } from '../model/link'; import { HistoryEntry } from "../model/historyEntry"; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import { Dispatch } from '../../../../framework/src/flux/store'; +import { SITEDOC_URL } from '../config'; export class SelectSiteAction extends Action { constructor(public site: Site){ @@ -80,6 +81,12 @@ export class InitializeLoadedDevicesAction extends Action{ } } +export class IsSitedocReachableAction extends Action{ + constructor(public isReachable: boolean){ + super(); + } +} + let running=false; export const UpdateDetailsView = (nodeId: string) =>(dispatcher: Dispatch, getState: () => IApplicationStoreState) =>{ @@ -137,4 +144,18 @@ running=true; dispatcher(new IsBusyCheckingDeviceListAction(false)); }); +} + +export const checkSitedockReachablity = () => async (dispatcher: Dispatch, getState: () => IApplicationStoreState) =>{ + console.log("searching for sitedoc server...") + requestRest<any>(SITEDOC_URL+'/app/versioninfo').then(response =>{ + console.log(response); + if(response){ + + dispatcher(new IsSitedocReachableAction(true)); + + }else{ + dispatcher(new IsSitedocReachableAction(false)); + } + }) }
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx index 7e378b81e..e04fda547 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx @@ -26,7 +26,16 @@ 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, ariaLabelRow: string, ariaLabelColumn: string[], verticalTable?: boolean, 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({ @@ -81,7 +90,7 @@ const DenseTable: React.FunctionComponent<props> = (props) => { if (data !== undefined) { if (!props.verticalTable) { - const ariaLabel = props.ariaLabelColumn[i]; + const ariaLabel = props.ariaLabelColumn === undefined ? props.headers[i].toLowerCase() : props.ariaLabelColumn[i]; if (ariaLabel.length > 0) { return <TableCell aria-label={ariaLabel}>{data}</TableCell> } else { @@ -93,7 +102,7 @@ const DenseTable: React.FunctionComponent<props> = (props) => { if (i === 0) { return <TableCell>{data}</TableCell> } else { - const ariaLabel = props.ariaLabelColumn[index]; + const ariaLabel = props.ariaLabelColumn === undefined ? props.headers[index].toLowerCase() : props.ariaLabelColumn[index]; return <TableCell aria-label={ariaLabel}>{data}</TableCell> } } 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 57091aebf..96727cc0d 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx @@ -37,7 +37,7 @@ const LinkDetails: React.FunctionComponent<props> = (props) => { if(el && el2){ if(props.link.type==="microwave") - setHeight(el!.height - el2!.y -30); + setHeight(el!.height - el2!.y -50); else setHeight(el!.height - el2!.y +20); @@ -68,10 +68,34 @@ const LinkDetails: React.FunctionComponent<props> = (props) => { 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}`) + 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 = [ @@ -94,7 +118,11 @@ const LinkDetails: React.FunctionComponent<props> = (props) => { </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> + 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>) } 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 3aa35c348..7f0c1c926 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx @@ -30,6 +30,9 @@ import { CheckDeviceList, InitializeLoadedDevicesAction } from '../../actions/de 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[]} @@ -48,6 +51,8 @@ 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(); @@ -82,35 +87,55 @@ const SiteDetails: React.FunctionComponent<siteDetailProps> = (props) => { 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=> + const linkRows: linkRow[] = props.site.links?.map(link=> { if(link.azimuthB!==null){ hasAzimuth=true; - return {name: link.name, azimuth: link.azimuthB.toFixed(2) } + return {name: link.name, azimuth: link.azimuthB.toFixed(2) } - }else{ - return {name: link.name } - } - - }); + }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 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); @@ -152,12 +177,12 @@ const SiteDetails: React.FunctionComponent<siteDetailProps> = (props) => { value === "links" && <> { - props.site.links.length === 0 && + props.site.links==null && <Typography aria-label="no-links-available" variant="body1" style={{ marginTop: '10px' }}>No links available.</Typography> } { - props.site.links.length > 0 && + 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> } @@ -178,6 +203,15 @@ const SiteDetails: React.FunctionComponent<siteDetailProps> = (props) => { } </> } + { + 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> ) } @@ -200,7 +234,8 @@ const buildAdress = (adress: Address) =>{ } const mapStateToProps = (state: IApplicationStoreState) => ({ - updatedDevices: state.network.details.checkedDevices + updatedDevices: state.network.details.checkedDevices, + isSitedocReachable: state.network.details.isSitedocReachable }); const mapDispatchToProps = (dispatcher: IDispatcher) => ({ diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx new file mode 100644 index 000000000..4f3235db7 --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx @@ -0,0 +1,274 @@ +/** + * ============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 diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx index c1fdccfb8..3b5a15ce5 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx @@ -29,7 +29,7 @@ type props = Connect<typeof mapStateToProps, typeof mapDispatchToProps>; const ConnectionInfo: React.FunctionComponent<props> = (props) => { - return ((props.isTopoServerReachable === false || props.isTileServerReachable === false )? <Paper style={{padding:5, position: 'absolute', top: 160, width: 230, left:"40%"}}> + return ((props.isTopoServerReachable === false || props.isTileServerReachable === false )? <Paper style={{padding:5, position: 'absolute', top: 160, width: 230, left:"40%", zIndex:1}}> <div style={{display: 'flex', flexDirection: 'column'}}> <div style={{'alignSelf': 'center', marginBottom:5}}> <Typography> <FontAwesomeIcon icon={faExclamationTriangle} /> Connection Error</Typography></div> {props.isTileServerReachable === false && <Typography> Tile data can't be loaded.</Typography>} diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx index bb98cb467..221e7dab8 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx @@ -32,9 +32,9 @@ const IconSwitch: React.FunctionComponent<props> = (props) =>{ return ( props.visible ? - <FormControlLabel style={{ padding:5, position: 'absolute',top: 190}} + <FormControlLabel style={{ padding:5, position: 'absolute',top: 190, zIndex:1}} value="end" - control={<Switch color="secondary" checked={props.areIconsEnabled} onChange={toggleChecked} />} + control={<Switch color="secondary" style={{zIndex:1}} checked={props.areIconsEnabled} onChange={toggleChecked} />} label="Show icons" labelPlacement="end" />: null) diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx index 9637d745e..1314edbba 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx @@ -54,6 +54,7 @@ let notLoadedBoundingBoxes: mapboxgl.LngLatBounds[] = []; let lastBoundingBox: mapboxgl.LngLatBounds | null = null; let myRef = React.createRef<HTMLDivElement>(); +import 'mapbox-gl/dist/mapbox-gl.css'; class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { @@ -158,7 +159,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { mapLayerService.addBaseSources(map, this.props.selectedSite, this.props.selectedLink); addImages(map, (result: boolean)=>{ - if(map.getZoom()>11) + if(map.getZoom()>11 && this.props.showIcons) { mapLayerService.addIconLayers(map, this.props.selectedSite?.properties.id) }else{ @@ -190,134 +191,142 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { } }) .catch(error => this.props.handleConnectionError(error)); + + map.on('click', this.mapClick); + map.on('moveend', this.mapMoveEnd); + map.on('move', this.mapMove); + }); + } - map.on('click', (e: any) => { + mapMove = () => { + + const mapZoom = map.getZoom(); - if (map.getLayer('points')) { // data is shown as points + const boundingBox = map.getBounds(); + + this.loadNetworkData(boundingBox); + if (mapZoom > 9) { - var clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], - [e.point.x + 5, e.point.y + 5]], { - layers: ['microwave-lines', 'fibre-lines'] - }), "id"); + if (map.getLayer('points')) { + map.setLayoutProperty('selectedPoints', 'visibility', 'visible'); + map.setPaintProperty('points', 'circle-radius', 7); + } + } else { - const clickedPoints = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['points'] }), "id"); - const alarmedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['alarmedPoints'] }), "id"); + // reduce size of points / lines if zoomed out + map.setPaintProperty('points', 'circle-radius', 2); + map.setLayoutProperty('selectedPoints', 'visibility', 'none'); - if (clickedPoints.length != 0) { + if (mapZoom <= 4) { + map.setPaintProperty('fibre-lines', 'line-width', 1); + map.setPaintProperty('microwave-lines', 'line-width', 1); + + } else { + map.setPaintProperty('fibre-lines', 'line-width', 2); + map.setPaintProperty('microwave-lines', 'line-width', 2); + } + } + }; + mapClick = (e: any) => { - if (alarmedSites.length > 0) { - alarmedSites.forEach(alarm => { - const index = clickedPoints.findIndex(item => item.properties!.id === alarm.properties!.id); + + if (map.getLayer('points')) { // data is shown as points - if (index !== -1) { - clickedPoints[index].properties!.alarmed = true; - clickedPoints[index].properties!.type = "alarmed"; - } - }); - } + var clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], + [e.point.x + 5, e.point.y + 5]], { + layers: ['microwave-lines', 'fibre-lines'] + }), "id"); - this.showSitePopup(clickedPoints, e.point.x, e.point.y); - } else if (clickedLines.length != 0) { - this.showLinkPopup(clickedLines, e.point.x, e.point.y); - } + const clickedPoints = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['points'] }), "id"); + const alarmedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['alarmedPoints'] }), "id"); + if (clickedPoints.length != 0) { - } else { // data is shown as icons - const clickedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps', 'point-building', 'point-data-center', 'point-factory', 'point-remaining'] }), "id"); - const clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], - [e.point.x + 5, e.point.y + 5]], { - layers: ['microwave-lines', 'fibre-lines'] - }), "id"); + if (alarmedSites.length > 0) { + alarmedSites.forEach(alarm => { + const index = clickedPoints.findIndex(item => item.properties!.id === alarm.properties!.id); - if (clickedSites.length > 0) - this.showSitePopup(clickedSites, e.point.x, e.point.y); - else if (clickedLines.length != 0) { - this.showLinkPopup(clickedLines, e.point.x, e.point.y); + if (index !== -1) { + clickedPoints[index].properties!.alarmed = true; + clickedPoints[index].properties!.type = "alarmed"; + } + }); } - } - }); + this.showSitePopup(clickedPoints, e.point.x, e.point.y); + } else if (clickedLines.length != 0) { + this.showLinkPopup(clickedLines, e.point.x, e.point.y); + } - map.on('moveend', () => { - const mapZoom = Number(map.getZoom().toFixed(2)); - const lat = Number(map.getCenter().lat.toFixed(4)); - const lon = Number(map.getCenter().lng.toFixed(4)); + } else { // data is shown as icons + const clickedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps', 'point-building', 'point-data-center', 'point-factory', 'point-remaining'] }), "id"); + const clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], + [e.point.x + 5, e.point.y + 5]], { + layers: ['microwave-lines', 'fibre-lines'] + }), "id"); - if (this.props.lat !== lat || this.props.lon !== lon || this.props.zoom !== mapZoom) { - this.props.updateMapPosition(lat, lon, mapZoom) + if (clickedSites.length > 0) + this.showSitePopup(clickedSites, e.point.x, e.point.y); + else if (clickedLines.length != 0) { + this.showLinkPopup(clickedLines, e.point.x, e.point.y); } + } + }; - // update the url to current lat,lon,zoom values + mapMoveEnd = () => { - const currentUrl = window.location.href; - const parts = currentUrl.split(URL_BASEPATH); - if(parts.length>0){ + const mapZoom = Number(map.getZoom().toFixed(2)); + const lat = Number(map.getCenter().lat.toFixed(4)); + const lon = Number(map.getCenter().lng.toFixed(4)); - const detailsPath = parts[1].split("/details/"); - if (detailsPath[1] !== undefined && detailsPath[1].length > 0) { - this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}/details/${detailsPath[1]}`) - } - else { - this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}`) - } - } - - - //switch icon layers if applicable - mapLayerService.showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); + if (this.props.lat !== lat || this.props.lon !== lon || this.props.zoom !== mapZoom) { + this.props.updateMapPosition(lat, lon, mapZoom) + } - //update statistics - const boundingBox = map.getBounds(); + // update the url to current lat,lon,zoom values - fetch(`${URL_API}/info/count/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) - .then(result => verifyResponse(result)) - .then(res => res.json()) - .then(result => { - if (result.links !== this.props.linkCount || result.sites !== this.props.siteCount) { - this.props.setStatistics(result.links, result.sites); - } - }) - .catch(error => this.props.handleConnectionError(error));; - }) + const currentUrl = window.location.href; + const parts = currentUrl.split(URL_BASEPATH); + if (parts.length > 0) { - map.on('move', () => { - const mapZoom = map.getZoom(); + const detailsPath = parts[1].split("/details/"); - const boundingBox = map.getBounds(); + if (detailsPath[1] !== undefined && detailsPath[1].length > 0) { + this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}/details/${detailsPath[1]}`) + } + else { + this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}`) + } + } - this.loadNetworkData(boundingBox); - if (mapZoom > 9) { - if (map.getLayer('points')) { - map.setLayoutProperty('selectedPoints', 'visibility', 'visible'); - map.setPaintProperty('points', 'circle-radius', 7); - } - } else { + //switch icon layers if applicable - // reduce size of points / lines if zoomed out - map.setPaintProperty('points', 'circle-radius', 2); - map.setLayoutProperty('selectedPoints', 'visibility', 'none'); + mapLayerService.showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); - if (mapZoom <= 4) { - map.setPaintProperty('fibre-lines', 'line-width', 1); - map.setPaintProperty('microwave-lines', 'line-width', 1); + //update statistics + const boundingBox = map.getBounds(); - } else { - map.setPaintProperty('fibre-lines', 'line-width', 2); - map.setPaintProperty('microwave-lines', 'line-width', 2); + fetch(`${URL_API}/info/count/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) + .then(result => verifyResponse(result)) + .then(res => res.json()) + .then(result => { + if (result.links !== this.props.linkCount || result.sites !== this.props.siteCount) { + this.props.setStatistics(result.links, result.sites); } - } - }); + }) + .catch(error => this.props.handleConnectionError(error));; } componentDidUpdate(prevProps: mapProps, prevState: {}) { + if(prevProps !== this.props){ //(load map) //triggered if either settings were done loading or tile/topology server connectivity checked if(prevProps.settings !== this.props.settings || this.props.isConnectivityCheckBusy !== prevProps.isConnectivityCheckBusy){ @@ -329,6 +338,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { //if everything done loading/reachable, load map if(!this.props.isConnectivityCheckBusy && this.props.isTileServerReachable && !this.props.settings.isLoadingData && (prevProps.settings.isLoadingData !==this.props.settings.isLoadingData || prevProps.isConnectivityCheckBusy !== this.props.isConnectivityCheckBusy)){ + if(map == undefined){ this.setupMap(); } @@ -443,12 +453,22 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { } } } + } } componentWillUnmount(){ + + //unregister events window.removeEventListener("menu-resized", this.handleResize); - lastBoundingBox=null; + + if(map){ + map.off('click', this.mapClick); + map.off('moveend', this.mapMoveEnd); + map.off('move', this.mapMove); + } + lastBoundingBox=null; + // will be checked again on next load this.props.setConnectivityCheck(true); } @@ -624,7 +644,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> { <ConnectionInfo /> <Button disabled={!this.props.isTopoServerReachable} - style={{'position': 'absolute', 'right':5, top:5, backgroundColor:'white'}} + style={{'position': 'absolute', 'right':5, top:5, backgroundColor:'white', zIndex:1}} onClick={e => this.props.navigateToApplication("network", "customize")} > <img src={customize} /> </Button> diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx index 45bc6092d..307c5d203 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx @@ -46,6 +46,7 @@ const styles = makeStyles({ top: 15, marginLeft: 5, width: 400, + zIndex:1 }, input: { flex: 1, diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx index 116b789d7..562689198 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx @@ -41,7 +41,7 @@ const Statistics: React.FunctionComponent<props> = (props: props) =>{ const reachabe = props.isTopoServerReachable && props.isTileServerReachable; - return (<Paper style={{ padding: 5, position: 'absolute', display: 'flex', flexDirection: "column", top: 70, width: 200, marginLeft: 5 }}> + return (<Paper style={{ padding: 5, position: 'absolute', display: 'flex', flexDirection: "column", top: 70, width: 200, marginLeft: 5, zIndex:1 }}> <div style={{ display: 'flex', flexDirection: "row" }}> <Typography style={{ fontWeight: "bold", flex: "1", color: reachabe ? "black" : "lightgrey" }} >Statistics</Typography> <Tooltip style={{ alignSelf: "flex-end" }} title="Gets updated when the map stops moving."> diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/config.ts b/sdnr/wt/odlux/apps/networkMapApp/src/config.ts index 633bd3732..bdb7d15e6 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/config.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/config.ts @@ -17,6 +17,7 @@ */ export const URL_API="/topology/network" +export const SITEDOC_URL="/sitedoc"; export const URL_TILE_API = '/tiles'; // http://tile.openstreetmap.org can be used for local testing, never commit with tile url changed! /tiles diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/detailsReducer.ts b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/detailsReducer.ts index 67e10e629..8a7fc6ada 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/detailsReducer.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/detailsReducer.ts @@ -20,13 +20,14 @@ import { IActionHandler } from '../../../../framework/src/flux/action'; import { link } from "../model/link"; import { Site, Device } from "../model/site"; import { HistoryEntry } from "../model/historyEntry"; -import { SelectSiteAction, SelectLinkAction, AddToHistoryAction, ClearHistoryAction, IsBusyCheckingDeviceListAction, FinishedLoadingDeviceListAction, ClearLoadedDevicesAction, ClearDetailsAction, InitializeLoadedDevicesAction } from '../actions/detailsAction'; +import { SelectSiteAction, SelectLinkAction, AddToHistoryAction, ClearHistoryAction, IsBusyCheckingDeviceListAction, FinishedLoadingDeviceListAction, ClearLoadedDevicesAction, ClearDetailsAction, InitializeLoadedDevicesAction, IsSitedocReachableAction } from '../actions/detailsAction'; export type DetailsStoreState={ data: Site | link | null, history: HistoryEntry[], isBusyCheckingDeviceList: boolean, - checkedDevices: Device[] + checkedDevices: Device[], + isSitedocReachable: boolean } @@ -34,7 +35,8 @@ const initialState: DetailsStoreState = { data: null, history:[], isBusyCheckingDeviceList: false, - checkedDevices: [] + checkedDevices: [], + isSitedocReachable: false } export const DetailsReducer:IActionHandler<DetailsStoreState>=(state = initialState, action)=>{ @@ -63,6 +65,8 @@ export const DetailsReducer:IActionHandler<DetailsStoreState>=(state = initialSt }else if(action instanceof InitializeLoadedDevicesAction){ state = Object.assign({}, state, {checkedDevices: action.devices}); + }else if(action instanceof IsSitedocReachableAction){ + state = Object.assign({}, state, {isSitedocReachable: action.isReachable}); } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/index.html b/sdnr/wt/odlux/apps/networkMapApp/src/index.html index e64c08c1e..f70571152 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/index.html +++ b/sdnr/wt/odlux/apps/networkMapApp/src/index.html @@ -13,15 +13,14 @@ <div id="app"></div> <script type="text/javascript" src="./require.js"></script> <script type="text/javascript" src="./config.js"></script> - <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' /> <script> // run the application require(["app","connectApp","faultApp", "networkMapApp", "configurationApp", "linkCalculationApp"], function (app, connectApp, faultApp, networkMapApp, configurationApp, linkCalculationApp) { connectApp.register(); - //faultApp.register(); + faultApp.register(); //configurationApp.register(); - //linkCalculationApp.register(); + linkCalculationApp.register(); networkMapApp.register(); app("./app.tsx").runApplication(); }); diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/model/link.ts b/sdnr/wt/odlux/apps/networkMapApp/src/model/link.ts index d992c66db..c1612098d 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/model/link.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/model/link.ts @@ -16,6 +16,12 @@ * ============LICENSE_END========================================================================== */ +type Antenna = { + name:string, + waveguideLossIndB: number, + gain: number +} + export type link = {id: string, name: string, length: number, @@ -25,6 +31,6 @@ export type link = {id: string, siteB: string, azimuthA: number | null, azimuthB: number | null, - locationA: { lon: number, lat: number, amsl:number | null, antennaHeight: number | null }, - locationB: { lon: number, lat: number, amsl:number | null, antennaHeight: number | null }, + locationA: { lon: number, lat: number, amsl:number | null, antennaHeight: number | null, antenna: Antenna |null }, + locationB: { lon: number, lat: number, amsl:number | null, antennaHeight: number | null, antenna: Antenna |null }, };
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/model/site.ts b/sdnr/wt/odlux/apps/networkMapApp/src/model/site.ts index b9102e871..13a7361f6 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/model/site.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/model/site.ts @@ -28,7 +28,8 @@ export type Site = { operator: string, location:{lon: number, lat: number}, devices: Device[], - links: link[] + links: link[], + furtherInformation:string } export type Address={ diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/model/stadokOrder.ts b/sdnr/wt/odlux/apps/networkMapApp/src/model/stadokOrder.ts new file mode 100644 index 000000000..1aad3aa97 --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/src/model/stadokOrder.ts @@ -0,0 +1,56 @@ +/** + * ============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========================================================================== + */ + +export type StadokOrder = { + date: Date, + assignedUser: string, + state: string, //todo: type restrict + tasks: Task[], + + +}; + +export class OrderToDisplay { + + static parse = (stadokOrder: StadokOrder) =>{ + let order = new OrderToDisplay(); + order.assignedUser=stadokOrder.assignedUser; + order.state=stadokOrder.state; + + const firstOpenTask = stadokOrder.tasks.find(task => !task.status); + + if(firstOpenTask){ + order.currentTask=firstOpenTask.description; + }else{ + order.currentTask="No task description available"; + } + + return order; + } + + state: string; + assignedUser: string; + currentTask: string; + +}; + +type Task = { + type: string, + description: string, + status: boolean +}
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/model/stadokSite.ts b/sdnr/wt/odlux/apps/networkMapApp/src/model/stadokSite.ts new file mode 100644 index 000000000..ed0ca397f --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/src/model/stadokSite.ts @@ -0,0 +1,54 @@ +/** + * ============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 { Address } from "./site"; + +type StadokSite = { + + siteId: string; + createdBy: Contact; + updatedOn: Date; + location: { lat: number, lon: number }, + address: Address; + contacts: { manager: Contact, owner: Contact }; + safteyNotices: string[]; + images: string[]; + type: string; + devices: Device[]; + logs: Log[]; + +}; + +type Contact = { + firstName: string; + lastName: string; + email: string; + telephoneNumber: string; +}; +type Log = { + date: Date, //string? + person: string; + entry: string; +}; + +type Device = { + "device": string, + "antenna": string +}; + +export default StadokSite;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx index e93368524..24a46994a 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx @@ -27,7 +27,7 @@ import { networkmapRootHandler } from './handlers/rootReducer'; import MainView from "./App"; import { subscribe, IFormatedMessage } from "../../../framework/src/services/notificationService"; import applicationApi from "../../../framework/src/services/applicationApi"; -import { UpdateDetailsView } from "./actions/detailsAction"; +import { checkSitedockReachablity, IsSitedocReachableAction, UpdateDetailsView } from "./actions/detailsAction"; import { findSiteToAlarm } from "./actions/mapActions"; import { URL_BASEPATH } from "./config"; import { Redirect, Route, RouteComponentProps, Switch, withRouter } from "react-router-dom"; @@ -40,7 +40,8 @@ const mapProps = (state: IApplicationStoreState) => ({ }); const mapDisp = (dispatcher: IDispatcher) => ({ - getSettings: () => dispatcher.dispatch(getSettings()) + getSettings: () => dispatcher.dispatch(getSettings()), + tryReachSitedoc: () => dispatcher.dispatch(checkSitedockReachablity()) }); @@ -51,6 +52,8 @@ const NetworkRouterApp = withRouter(connect(mapProps, mapDisp)((props: RouteComp (async function waitFor() { await props.getSettings(); })(); + + props.tryReachSitedoc(); }, []); diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts index 6dfd7983a..7ce4bfa92 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts @@ -141,6 +141,8 @@ class MapLayerService { public addBaseLayers = (map: mapboxgl.Map, themesettings?: ThemeElement) => { const theme = !themesettings ? this.pickTheme() : themesettings; + console.log("user selected theme: " + this.selectedTheme) + console.log("found theme:" + theme); this.addCommonLayers(map); diff --git a/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js b/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js index 3e80514f5..5684040b7 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/networkMapApp/webpack.config.js @@ -67,6 +67,10 @@ module.exports = (env) => { name: './icons/[hash].[ext]' } }] + }, + { + test: /\.css$/i, + use: ["style-loader", "css-loader"], }] }, @@ -168,8 +172,15 @@ module.exports = (env) => { target: "http://localhost:3002", secure: false }, + "/sitedoc/": { + target: "http://localhost:3002", + secure: false, + pathRewrite(pathname) { + return pathname.replace(/^\/sitedoc/, '/topology/stadok') + } + }, "/tiles/": { - target: "http://www.openstreetmap.org", + target: "http://tile.openstreetmap.org", secure: false }, "/help/": { diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json index 305fc07f4..af38fb116 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json @@ -30,8 +30,8 @@ "@types/react": "17.0.3", "@types/react-dom": "17.0.2", "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.0", - "@material-ui/icons": "4.9.1", + "@material-ui/core": "4.11.4", + "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/pom.xml b/sdnr/wt/odlux/apps/performanceHistoryApp/pom.xml index cb4cfefde..2fe758114 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/pom.xml +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/pom.xml @@ -140,8 +140,8 @@ <!-- optional: default phase is "generate-resources" --> <phase>initialize</phase> <configuration> - <nodeVersion>v10.16.3</nodeVersion> - <yarnVersion>v1.19.0</yarnVersion> + <nodeVersion>v12.13.0</nodeVersion> + <yarnVersion>v1.22.10</yarnVersion> </configuration> </execution> <execution> |
