zrhoffman commented on code in PR #7615: URL: https://github.com/apache/trafficcontrol/pull/7615#discussion_r1273679183
########## experimental/traffic-portal/src/app/core/topologies/topology-details/topology-details.component.html: ########## @@ -0,0 +1,45 @@ +<!-- +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. +--> +<mat-card appearance="outlined" class="page-content single-column"> + <tp-loading *ngIf="!topology"></tp-loading> + <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="topology"> Review Comment: Removed the `ngIf`, but again, a lot of code got merged that does this: ``` $ git grep '<form ngNativeValidate.*ngIf' src/app/core src/app/core/cache-groups/asns/detail/asn-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="asn"> src/app/core/cache-groups/cache-group-details/cache-group-details.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="cacheGroup"> src/app/core/cache-groups/coordinates/detail/coordinate-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="coordinate"> src/app/core/cache-groups/divisions/detail/division-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="division"> src/app/core/cache-groups/regions/detail/region-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="region"> src/app/core/cdns/cdn-detail/cdn-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="cdn"> src/app/core/parameters/detail/parameter-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="parameter"> src/app/core/profiles/profile-detail/profile-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="profile"> src/app/core/servers/capabilities/capability-details/capability-details.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="capability"> src/app/core/servers/phys-loc/detail/phys-loc-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="physLocation"> src/app/core/types/detail/type-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="type"> src/app/core/users/roles/detail/role-detail.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="role"> src/app/core/users/tenants/tenant-details/tenant-details.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="tenant"> src/app/core/users/user-details/user-details.component.html: <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="user"> ``` ########## experimental/traffic-portal/src/app/core/topologies/topology-details/topology-details.component.ts: ########## @@ -0,0 +1,152 @@ +/* +* 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. +*/ +import { NestedTreeControl } from "@angular/cdk/tree"; +import { Location } from "@angular/common"; +import { Component, OnInit } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { MatTreeNestedDataSource } from "@angular/material/tree"; +import { ActivatedRoute } from "@angular/router"; +import { ResponseTopology } from "trafficops-types"; + +import { TopologyService, TopTreeNode } from "src/app/api"; +import { + DecisionDialogComponent, + DecisionDialogData, +} from "src/app/shared/dialogs/decision-dialog/decision-dialog.component"; +import { + NavigationService +} from "src/app/shared/navigation/navigation.service"; + +/** + * TopologyDetailComponent is the controller for a Topology's "detail" page. + */ +@Component({ + selector: "tp-topology-details", + styleUrls: ["./topology-details.component.scss"], + templateUrl: "./topology-details.component.html", +}) +export class TopologyDetailsComponent implements OnInit { + public new = false; + public topology: ResponseTopology = { + description: "", + lastUpdated: new Date(), + name: "", + nodes: [], + }; + public showErrors = false; + public topologies: Array<ResponseTopology> = []; + public topologySource = new MatTreeNestedDataSource<TopTreeNode>(); + public topologyControl = new NestedTreeControl<TopTreeNode>(node => node.children); + + constructor( + private readonly route: ActivatedRoute, + private readonly api: TopologyService, + private readonly location: Location, + private readonly dialog: MatDialog, + private readonly navSvc: NavigationService, + ) { + } + + /** + * Angular lifecycle hook where data is initialized. + */ + public async ngOnInit(): Promise<void> { + const name = this.route.snapshot.paramMap.get("name"); + if (name === null) { + console.error("missing required route parameter 'name'"); + return; + } + + const topologiesPromise = this.api.getTopologies().then(topologies => this.topologies = topologies); + if (name === "new") { + this.new = true; + this.setTitle(); + await topologiesPromise; + return; + } + await topologiesPromise; + const index = this.topologies.findIndex(c => c.name === name); + if (index < 0) { + console.error(`no such Topology: #${name}`); + return; + } + this.topology = this.topologies.splice(index, 1)[0]; + this.topologySource.data = this.api.topologyToTree(this.topology); + } + + /** + * Used by angular to determine if this node should be a nested tree node. + * + * @param _ Index of the current node. + * @param node Node to test. + * @returns If the node has children. + */ + public hasChild(_: number, node: TopTreeNode): boolean { + return node.children instanceof Array && node.children.length > 0; Review Comment: Switched to duck typing/`Array.isArray` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
