diff --git a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.html b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.html index 3db43f72..4745dfe4 100644 --- a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.html +++ b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.html @@ -5,6 +5,7 @@
{{title}}

+ diff --git a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.ts b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.ts index c8899a16..f3809b77 100644 --- a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.ts +++ b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.ts @@ -30,12 +30,7 @@ import { MatIconModule } from '@angular/material/icon'; import { HttpClient} from '@angular/common/http'; import { TreeNodeProcessor } from './network-visualizer.treenodeprocessor'; import { NetworkVisualizerHelper } from './network-visualizer.helper'; -// import { ServicePolicy } from '../models/service-policy'; -// import { EdgeRouterPolicyV2 } from '../models/edge-router-policy'; -// import { EdgeRouterV2 } from '../models/edge-router'; -// import { Identity } from '../models/identity'; -// import { PlatformService} from '../models/platform-service'; -// import { ServiceEdgeRouterPolicy} from '../models/service-edge-router-policy'; +import {LoggerService} from "../../messaging/logger.service"; @Component({ selector: 'app-network-visualizer', @@ -98,6 +93,7 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement @Inject(SETTINGS_SERVICE) public settingsService: SettingsService, @Inject(ZITI_DATA_SERVICE) private zitiService: ZitiDataService, private httpClient: HttpClient, + private logger: LoggerService, public treeNodeProcessor: TreeNodeProcessor, public topologyHelper: NetworkVisualizerHelper, ) { @@ -123,6 +119,7 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } async getNetworkObjects() { + this.isLoading = true; await this.readAllObjects(); this.processFirstNetworkGraph(); } @@ -155,7 +152,9 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } Promise.all(promises).then(() => {}); } - }); // identity promises + }).catch(error => { + this.logger.error('Error in fetching Identities', error.message); + }); // identity promises } async fetchServices(pagesize) { @@ -188,6 +187,8 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } Promise.all(s_promises).then(() => { }); } + }).catch(error => { + this.logger.error('Error in fetching services', error.message); }); } @@ -222,7 +223,9 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement Promise.all(sp_promises).then(() => { }); } - }); + }).catch(error => { + this.logger.error('Error in fetching service-policies', error.message); + }); } async fetchEdgeRouters(pagesize) { @@ -254,17 +257,19 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } Promise.all(r_promises).then(() => { }); } + }).catch(error => { + this.logger.error('Error in fetching edge-routers', error.message); }); } async findEdgeRouterPolicies(pagesize) { + this.router_policies = []; const erpolicies_paging = this.getPagingObject(pagesize); return await this.zitiService .get(`edge-router-policies`, erpolicies_paging, []) .then(async (result) => { this.router_policies = result.data; if (!this.router_policies || this.router_policies.length === 0) { - this.router_policies = []; this.isLoading = false; } else { const pages = Math.ceil(result.meta.pagination.totalCount / pagesize); @@ -287,9 +292,12 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement Promise.all(r_promises).then(() => { }); } + }).catch(error => { + this.logger.error('Error in fetching edge-router-policies', error); }); } async fetchServiceEdgeRouterPolicies(pagesize) { + this.service_router_policies = []; const serp_paging = this.getPagingObject(pagesize); return await this.zitiService .get(`service-edge-router-policies`, serp_paging, []) @@ -297,7 +305,6 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement this.service_router_policies = result.data; if (!this.service_router_policies || this.service_router_policies.length === 0) { - this.service_router_policies = []; this.isLoading = false; } else { const pages = Math.ceil(result.meta.pagination.totalCount / pagesize); @@ -319,9 +326,12 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } Promise.all(r_promises).then(() => { }); } - }); + }).catch(error => { + this.logger.error('Error in fetching service-edge-router-policies', error); + }); } async fetchConfigs(pagesize) { + this.configs = []; const configs_paging = this.getPagingObject(pagesize); return await this.zitiService .get(`configs`, configs_paging, []) @@ -350,7 +360,10 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } Promise.all(r_promises).then(() => { }); } - }); + }).catch(error => { + this.logger.error('Error in fetching configs', error); + }); + } async readAllObjects() { @@ -371,7 +384,6 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement } - processFirstNetworkGraph() { try { const treeObj = this.topologyHelper.getResourceTreeObj( @@ -383,7 +395,8 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement this.edgerouters, this.router_policies, this.service_router_policies, - this.uniqId + this.uniqId, + this.logger ); this.uniqId = treeObj.lastId; @@ -431,8 +444,8 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement ); this.initTopoView(); - } catch (err) { - console.log('error',err); + } catch (err:any) { + this.logger.error(err.message); } this.isLoading = false; @@ -461,10 +474,12 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement initTopoView() { this.autocompleteOptions = []; - // const duration = 750; - const margin = { top: 20, right: 90, bottom: 30, left: 0 }; - const width = 1600 - margin.left - margin.right; - const height = 1600 - margin.top - margin.bottom; + const margin = { top: 20, right: 190, bottom: 30, left: 0 }; + // const width = 1600 - margin.left - margin.right; + const width = window.innerWidth - margin.right; + // const height = 1600 - margin.top - margin.bottom; + const height = window.innerHeight - margin.bottom; + this.treetooltip = d3.select('#tooltip'); this.resourceTypeError = false; @@ -481,9 +496,9 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement .attr('width', '100%') .attr('height', '100%') .call(this.zoom) - .attr('viewBox', '0 ' + (-1 * (height - margin.top - margin.bottom)) / 3 + ' ' + width + ' ' + height) + .attr('viewBox', '-20 -450 ' + (width - margin.top*2 - margin.bottom) + ' ' + +(height*2 -margin.bottom)) .append('g') - .attr('transform', 'translate(' + -300 + ',' + 225 + ')'); + .attr('transform', 'translate(' + -20 + ',' + 200 + ')'); d3.select('body').on('click', function () { d3.select('#topocontextmenu').style('display', 'none'); @@ -491,18 +506,17 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement d3.selectAll('g > *').remove(); - // this.treemap = d3.tree().nodeSize([140, 40]); this.treemap = d3.tree().nodeSize([100, 20]); - this.networkGraph.x = height / 4; + this.networkGraph.x = 100; // height / 4; this.networkGraph.y = 100; this.networkGraph.children.forEach(collapse); this.updateTree(this.networkGraph); _.delay(() => { this.transform = d3.zoomIdentity; - this.transform.x = -300; - this.transform.y = 225; + this.transform.x = -200; + this.transform.y = 205; this.transform.k = 1; this.svg.transition().duration(750).attr('transform', this.transform); }, 600); @@ -527,8 +541,8 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement this.treeData = this.treemap(this.networkGraph); this.nodes = this.treeData.descendants(); this.links = this.treeData.descendants().slice(1); - } catch (e) { - console.log('Error:', e); + } catch (e:any) { + this.logger.error('Error in building tree object: '+ e.message); } const svgDefs = this.svg.append('defs'); const linearGradient = svgDefs.append('linearGradient').attr('id', 'NodeGradient'); @@ -824,10 +838,6 @@ export class NetworkVisualizerComponent extends VisualizerServiceClass implement d, this.networkGraph, this.identities, - this.services, - this.edgerouters, - this.router_policies, - this.service_policies, this.uniqId, this.zitiService, this.configs diff --git a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.helper.ts b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.helper.ts index 5741e45d..552a5fba 100644 --- a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.helper.ts +++ b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.helper.ts @@ -185,7 +185,8 @@ export class NetworkVisualizerHelper { edgeRouterPolicies, serviceEdgeRouterPolicies, // networkProductVersion, - uniqId + uniqId, + logger ) { function createId() { ++uniqId; diff --git a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.treenodeprocessor.ts b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.treenodeprocessor.ts index e89c8f54..aa16eb0a 100644 --- a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.treenodeprocessor.ts +++ b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.treenodeprocessor.ts @@ -8,23 +8,31 @@ import { ServicePolicy, Attribute, Children, Identity, ERouter, ERPolicy, Group, }) export class TreeNodeProcessor { uniqId = 0; + getPagingObject(pagesize) { + const paging = { + searchOn: 'name', + noSearch: false, + filter: '', + total: pagesize, + page: 1, + sort: 'name', + order: 'asc', + }; + return paging; + } async processIdentitiesForNodeClick( - endpointNode, + identityNode, networkGraph, rawEndpoints, - rawServices, - rawEdgeRouters, - rawRouterPolicies, - servicePolicies, uniqId, zitiService, configs ) { - const myPromise = await new Promise((resolve, reject) => { + const myPromise = await new Promise( async (resolve, reject) => { const wait_promises = []; this.uniqId = uniqId; - const rawEp = this.findRawEndpoint(endpointNode.data.name, rawEndpoints); + const rawEp = this.findRawEndpoint(identityNode.data.name, rawEndpoints); let rawEpAttributes = []; if (rawEp.roleAttributes) {rawEpAttributes = rawEp.roleAttributes}; rawEpAttributes.push('@' + rawEp.name); @@ -32,8 +40,8 @@ export class TreeNodeProcessor { const attribute = new Attribute(); attribute.id = this.createId(); attribute.name = rawEpAttributes[i]; - attribute.type = 'Endpoint Attribute'; - endpointNode.data.children.push(attribute); + attribute.type = 'Identity Attribute'; + identityNode.data.children.push(attribute); } const bindServices = new Children(); @@ -42,24 +50,17 @@ export class TreeNodeProcessor { const services_url = this.getLinkForResource(rawEp, 'service-policies').replace('./', ''); const pagesize = 500; - const services_paging = { - searchOn: 'name', - filter: '', - total: pagesize, - page: 1, - sort: 'name', - order: 'asc', - }; - - const firstPromise = zitiService + const services_paging = this.getPagingObject(pagesize); + + const firstPromise = await zitiService .get(services_url, services_paging, []) - .then((result) => { + .then( async (result) => { identityServicePolicies = result.data; const pages = Math.ceil(result.meta.pagination.totalCount / pagesize); const promises = []; for (let page = 2; page <= pages; page++) { services_paging.page = page; - const tmp_promise = zitiService + const tmp_promise = await zitiService .get( services_url, services_paging, @@ -73,12 +74,13 @@ export class TreeNodeProcessor { promises.push(tmp_promise); wait_promises.push(tmp_promise); } - Promise.all(promises).then(() => { + Promise.all(promises).then( () => { const sub_promises = []; - identityServicePolicies.find( (isp) => { + identityServicePolicies.find( async (isp) => { + const pagingOb = this.getPagingObject(pagesize); const ser_url = this.getLinkForResource(isp, 'services').replace('./', ''); - const tmpPromise = zitiService - .get(ser_url, services_paging, []) + const tmpPromise = await zitiService + .get(ser_url, pagingOb, []) .then((result) => { const tmp_services = []; result.data.find( (re) => { @@ -100,18 +102,16 @@ export class TreeNodeProcessor { wait_promises.push(tmpPromise); }); // loop - - Promise.all(sub_promises).then(() => { - if(bindServices.children.length>0) { - bindServices.name = 'Bind-Services('+bindServices.children.length+')'; - endpointNode.data.children.push(bindServices); - } - if(dialServices.children.length>0) { - dialServices.name = 'Dial-Services('+dialServices.children.length+')'; - endpointNode.data.children.push(dialServices); - } - - }); + Promise.all(sub_promises).then(() => { + if(bindServices.children.length>0) { + bindServices.name = 'Bind-Services('+bindServices.children.length+')'; + identityNode.data.children.push(bindServices); + } + if(dialServices.children.length>0) { + dialServices.name = 'Dial-Services('+dialServices.children.length+')'; + identityNode.data.children.push(dialServices); + } + }); }); }); wait_promises.push(firstPromise); @@ -258,56 +258,15 @@ export class TreeNodeProcessor { } findRawEndpoint(epName, endpoints) { - return endpoints.find((ep) => ep.name === epName); + return endpoints.find((ep) => ep.name === epName); } - async processServicesForNodeClick(serviceNode, networkGraph, services, uniqId, zitiService) { - const myPromise = await new Promise((resolve, reject) => { + async processServicesForNodeClick(serviceNode, networkGraph, services, uniqId, zitiService) { + const myPromise = await new Promise( async (resolve, reject) => { const wait_promises = []; this.uniqId = uniqId; const rawServiceObj = services.find((s) => s.name === serviceNode.data.name); - /* - if (_.get(rawServiceObj, 'model.edgeRouterHosts')) { - const hostedERs = new Children(); - rawServiceObj.model.edgeRouterHosts.find((ehost) => { - const erOb = this.findEdgeRouterForId(ehost.edgeRouterId, edgerouters); - if (erOb) { - if (ehost && ehost.serverEgress) { - erOb.serverEgressProtocol = ehost.serverEgress.protocol; - erOb.serverEgressHost = ehost.serverEgress.host; - erOb.serverEgressPort = ehost.serverEgress.port; - } - hostedERs.children.push(erOb); - } - }); - if (hostedERs.children.length > 0) { - hostedERs.name = 'Hosted Edge Routers(' + hostedERs.children.length + ')'; - hostedERs.type = 'Edge Routers'; - serviceNode.data.children.push(hostedERs); - } - } - if (_.get(rawServiceObj, 'model.bindEndpointAttributes')) { - const hostedEps = new Children(); - - rawServiceObj.model.bindEndpointAttributes.find((endpointStr) => { - const hostedEp = this.findEndpoint(endpointStr, endpoints); - if (hostedEp) { - hostedEp.type = 'Endpoint'; - const serverEgress = _.get(rawServiceObj, 'model.serverEgress', {}); - hostedEp.serverEgressProtocol = serverEgress.protocol; - hostedEp.serverEgressHost = serverEgress.host; - hostedEp.serverEgressPort = serverEgress.port; - hostedEps.children.push(hostedEp); - } - }); - if (hostedEps.children.length > 0) { - hostedEps.name = 'Hosted Endpoints(' + hostedEps.children.length + ')'; - hostedEps.type = 'Endpoints'; - serviceNode.data.children.push(hostedEps); - } - } - */ const attributeswithName = []; attributeswithName.push('@' + rawServiceObj.name); rawServiceObj.roleAttributes && rawServiceObj.roleAttributes.find((srattr) => { @@ -330,9 +289,10 @@ export class TreeNodeProcessor { let service_configs = []; const configs_url = this.getLinkForResource(rawServiceObj, 'configs'); - - const configPromise = zitiService - .get(configs_url, {}, []) + const pagesize = 500; + const pagingOb = this.getPagingObject(pagesize); + const configPromise = await zitiService + .get(configs_url, pagingOb, []) .then((configs) => { service_configs = configs && configs.data ? configs.data : []; }); @@ -348,19 +308,19 @@ export class TreeNodeProcessor { let bindPolicies = []; let bindIdnetities = []; - const promise2 = zitiService - .get(service_policies_url, {}, []) + const promise2 = await zitiService + .get(service_policies_url, pagingOb, []) .then((policies) => { const identityPromises = []; - policies.data.forEach((policy) => { - if (policy.type === 'Bind') { + policies.data.forEach( async (policy) => { + if (policy.type === 'Bind') { const bindIdentitiesUrl = this.getLinkForResource( policy, 'identities' ); - const promse = zitiService - .get(bindIdentitiesUrl.replace('./', ''), {}, []) + const promse = await zitiService + .get(bindIdentitiesUrl.replace('./', ''), pagingOb, []) .then((res) => { if (res && res.data.length > 0) { res.data.forEach((rs) => { @@ -381,13 +341,12 @@ export class TreeNodeProcessor { tmp.type = "Identities"; tmp.children = bindIdnetities; serviceNode.data.children.push(tmp); - resolve('this is a promise'); }); }); wait_promises.push(promise2); Promise.all(wait_promises).then( () => { - + resolve('this is a promise'); }); }); // end of mypromise @@ -395,26 +354,19 @@ export class TreeNodeProcessor { return nd.children; }); return [networkGraph, this.uniqId]; - } // end of processServicesForTree + } // end of processServicesForNodeClick - async processServicePoliciesForNodeClick(policyNode, networkGraph, servicePolicies, uniqId, zitiService) { + async processServicePoliciesForNodeClick(policyNode, networkGraph, servicePolicies, uniqId, zitiService) { - const myPromise = await new Promise((resolve, reject) => { + const myPromise = await new Promise( async (resolve, reject) => { const wait_promises = []; this.uniqId = uniqId; const rawSPolicy = servicePolicies.find((s) => s.name === policyNode.data.name); const pagesize = 500; - const services_paging = { - searchOn: 'name', - filter: '', - total: pagesize, - page: 1, - sort: 'name', - order: 'asc', - }; + const services_paging = this.getPagingObject(pagesize); const bindIdentitiesUrl = this.getLinkForResource( rawSPolicy, 'identities' ); - const sp_promise = zitiService.get(bindIdentitiesUrl, services_paging, []) + const sp_promise = await zitiService.get(bindIdentitiesUrl, services_paging, []) .then((ids) => { const childs =new Children() childs.name = rawSPolicy.type+ 'Identities'; @@ -430,9 +382,6 @@ export class TreeNodeProcessor { policyNode.data.children.push(childs); }); wait_promises.push(sp_promise); - - - // wait_promises.push(promise2); Promise.all(wait_promises).then( () => { resolve('resolve.'); }); @@ -453,7 +402,7 @@ export class TreeNodeProcessor { zitiService ) { - const mainPromise = await new Promise( (resolve, reject) => { + const mainPromise = await new Promise( async (resolve, reject) => { const wait_promises = []; this.uniqId = uniqId; const er = edgerouters.find((s) => s.name === edgerouterNode.data.name); @@ -467,24 +416,17 @@ export class TreeNodeProcessor { edgerouterNode.data.children.push(att); }); const pagesize = 500; - const services_paging = { - searchOn: 'name', - filter: '', - total: pagesize, - page: 1, - sort: 'name', - order: 'asc', - }; + const services_paging = this.getPagingObject(pagesize); const erpoliciesUrl = this.getLinkForResource(er, 'edge-router-policies'); let erpoliciesForER = []; - const erpoliciespromise = zitiService.get(erpoliciesUrl, services_paging, []) - .then((result) => { + const erpoliciespromise = await zitiService.get(erpoliciesUrl, services_paging, []) + .then( async (result) => { erpoliciesForER = result.data; const pages = Math.ceil(result.meta.pagination.totalCount / pagesize); const promises = []; for (let page = 2; page <= pages; page++) { services_paging.page = page; - const tmp_promise = zitiService.get( + const tmp_promise = await zitiService.get( erpoliciesUrl, services_paging, [] @@ -697,14 +639,7 @@ export class TreeNodeProcessor { this.uniqId = uniqId; const rawERPolicy = edgeRouterPolicies.find((s) => s.name === erPolicyNode.data.name); const pagesize = 500; - const services_paging = { - searchOn: 'name', - filter: '', - total: pagesize, - page: 1, - sort: 'name', - order: 'asc', - }; + const services_paging = this.getPagingObject(pagesize); const url = this.getLinkForResource(rawERPolicy, 'identities'); let ids = []; const idpromise = zitiService.get(url, services_paging, []) @@ -767,14 +702,7 @@ export class TreeNodeProcessor { const wait_promises = []; const rawServiceERPolicy = serviceEdgeRouterPolicies.find((s) => s.name === serviceErPolicyNode.data.name); const pagesize = 500; - const services_paging = { - searchOn: 'name', - filter: '', - total: pagesize, - page: 1, - sort: 'name', - order: 'asc', - }; + const services_paging = this.getPagingObject(pagesize); const url = this.getLinkForResource(rawServiceERPolicy, 'edge-routers'); let routers = []; const erpromise = zitiService.get(url, services_paging, []) @@ -813,14 +741,7 @@ export class TreeNodeProcessor { }); wait_promises.push(erpromise); - const services_pagingB = { - searchOn: 'name', - filter: '', - total: pagesize, - page: 1, - sort: 'name', - order: 'asc', - }; + const services_pagingB = this.getPagingObject(pagesize); const urlB = this.getLinkForResource(rawServiceERPolicy, 'services'); let serArray = [];