Traffic Portal v2 Topologies details page

experimental/traffic-portal/src/app/api/index.ts

@@ -26,6 +26,7 @@ import { MiscAPIsService } from "./misc-apis.service";
 import { PhysicalLocationService } from "./physical-location.service";
 import { ProfileService } from "./profile.service";
 import { ServerService } from "./server.service";
+import { TopologyService } from "./topology.service";
 import { TypeService } from "./type.service";
 import { UserService } from "./user.service";
 
@@ -38,6 +39,7 @@ export * from "./misc-apis.service";
 export * from "./physical-location.service";
 export * from "./profile.service";
 export * from "./server.service";
+export * from "./topology.service";
 export * from "./type.service";
 export * from "./user.service";
 
@@ -59,6 +61,7 @@ export * from "./user.service";
 		PhysicalLocationService,
 		ProfileService,
 		ServerService,
+		TopologyService,
 		TypeService,
 		UserService,
 	]

experimental/traffic-portal/src/app/api/topology.service.ts

@@ -0,0 +1,227 @@
+/*
+* 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 { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import type {
+	RequestTopology,
+	ResponseTopology, ResponseTopologyNode,
+} from "trafficops-types";
+
+import { APIService } from "./base-api.service";
+
+/**
+ * TopTreeNode is used to represent a topology in a format usable as a material
+ * nested tree data source.
+ */
+export interface TopTreeNode {
+	name: string;
+	cachegroup: string;
+	children: Array<TopTreeNode>;
+	parents: Array<this>;
+}
+
+/**
+ * TopologyService exposes API functionality relating to Topologies.
+ */
+@Injectable()
+export class TopologyService extends APIService {
+
+	constructor(http: HttpClient) {
+		super(http);
+	}
+
+	/**
+	 * Gets a specific Topology from Traffic Ops
+	 *
+	 * @param name The name of the Topology to be returned.
+	 * @returns The Topology with the given name.
+	 */
+	public async getTopologies(name: string): Promise<ResponseTopology>;
+	/**
+	 * Gets all Topologies from Traffic Ops
+	 *
+	 * @returns An Array of all Topologies configured in Traffic Ops.
+	 */
+	public async getTopologies(): Promise<Array<ResponseTopology>>;
+	/**
+	 * Gets one or all Topologies from Traffic Ops
+	 *
+	 * @param name The name of a single Topology to be returned.
+	 * @returns Either an Array of Topology objects, or a single Topology, depending on
+	 * whether `name` was	passed.
+	 */
+	public async getTopologies(name?: string): Promise<Array<ResponseTopology> | ResponseTopology> {
+		const path = "topologies";
+		if (name) {
+			const topology = await this.get<[ResponseTopology]>(path, undefined, {name}).toPromise();
+			if (topology.length !== 1) {
+				throw new Error(`${topology.length} Topologies found by name ${name}`);
+			}
+			return topology[0];
+		}
+		return this.get<Array<ResponseTopology>>(path).toPromise();
+	}
+
+	/**
+	 * Deletes a Topology.
+	 *
+	 * @param topology The Topology to be deleted, or just its name.
+	 */
+	public async deleteTopology(topology: ResponseTopology | string): Promise<void> {
+		const name = typeof topology === "string" ? topology : topology.name;
+		return this.delete(`topologies?name=${name}`).toPromise();
+	}
+
+	/**
+	 * Creates a new Topology.
+	 *
+	 * @param topology The Topology to create.
+	 */
+	public async createTopology(topology: RequestTopology): Promise<ResponseTopology> {
+		return this.post<ResponseTopology>("topologies", topology).toPromise();
+	}
+
+	/**
+	 * Replaces an existing Topology with the provided new definition of a
+	 * Topology.
+	 *
+	 * @param name The if of the Topology being updated.
+	 * @param topology The new definition of the Topology.
+	 */
+	public async updateTopology(name: string, topology: RequestTopology): Promise<ResponseTopology>;
+	/**
+	 * Replaces an existing Topology with the provided new definition of a
+	 * Topology.
+	 *
+	 * @param topology The full new definition of the Topology being
+	 * updated.
+	 */
+	public async updateTopology(topology: ResponseTopology): Promise<ResponseTopology>;
+	/**
+	 * Replaces an existing Topology with the provided new definition of a
+	 * Topology.
+	 *
+	 * @param topologyOrName The full new definition of the Topology being
+	 * updated, or just its name.
+	 * @param payload The new definition of the Topology. This is required if
+	 * `topologyOrName` is an name, and ignored otherwise.
+	 */
+	public async updateTopology(topologyOrName: ResponseTopology | string, payload?: RequestTopology): Promise<ResponseTopology> {
+		let name;
+		let body;
+		if (typeof topologyOrName === "string") {
+			if (!payload) {
+				throw new TypeError("invalid call signature - missing request payload");
+			}
+			body = payload;
+			name = topologyOrName;
+		} else {
+			body = topologyOrName;
+			({name} = topologyOrName);
+		}
+
+		return this.put<ResponseTopology>(`topologies?name=${name}`, body).toPromise();
+	}
+
+	/**
+	 * Generates a material tree from a topology.
+	 *
+	 * @param topology The topology to generate a material tree from.
+	 * @returns a material tree.
+	 */
+	public topologyToTree(topology: ResponseTopology): Array<TopTreeNode> {
+		const treeNodes: Array<TopTreeNode> = [];
+		const topLevel: Array<TopTreeNode> = [];
+		for (const node of topology.nodes) {
+			const name = node.cachegroup;
+			const cachegroup = node.cachegroup;
+			const children: Array<TopTreeNode> = [];
+			const parents: Array<TopTreeNode> = [];
+			treeNodes.push({
+				cachegroup,
+				children,
+				name,
+				parents,
+			});
+		}
+		for (let index = 0; index < topology.nodes.length; index++) {
+			const node = topology.nodes[index];
+			const treeNode = treeNodes[index];
+			if (!(node.parents instanceof Array) || node.parents.length < 1) {
+				topLevel.push(treeNode);
+				continue;
+			}
+			for (const parent of node.parents) {
+				treeNodes[parent].children.push(treeNode);
+				treeNode.parents.push(treeNodes[parent]);
+			}
+		}
+		return topLevel;
+	}
+
+	/**
+	 * Generates a topology from a material tree.
+	 *
+	 * @param name The topology name
+	 * @param description The topology description
+	 * @param treeNodes The data for a material tree
+	 * @returns a material tree.
+	 */
+	public treeToTopology(name: string, description: string, treeNodes: Array<TopTreeNode>): ResponseTopology {
+		const topologyNodeIndicesByCacheGroup: Map<string, number> = new Map();
+		const nodes: Array<ResponseTopologyNode> = new Array<ResponseTopologyNode>();
+		this.treeToTopologyInner(topologyNodeIndicesByCacheGroup, nodes, undefined, treeNodes);
+		const topology: ResponseTopology = {
+			description,
+			lastUpdated: new Date(),
+			name,
+			nodes,
+		};
+		return topology;
+	}
+
+	/**
+	 * Inner recursive function for generating a Topology from a material tree.
+	 *
+	 * @param topologyNodeIndicesByCacheGroup A map of Topology node indices
+	 * using cache group names as the key
+	 * @param topologyNodes The mutable array of Topology nodes
+	 * @param parent The parent, if it exists
+	 * @param treeNodes The data for a material tree
+	 */
+	protected treeToTopologyInner(topologyNodeIndicesByCacheGroup: Map<string, number>,
+		topologyNodes: Array<ResponseTopologyNode>, parent: ResponseTopologyNode | undefined, treeNodes: Array<TopTreeNode>): void {
+
+		for (const treeNode of treeNodes) {
+			const cachegroup = treeNode.cachegroup;
+			const parents: number[] = [];
+			if (parent instanceof Object) {
+				const index = topologyNodeIndicesByCacheGroup.get(parent.cachegroup);
+				if (!(typeof index === "number")) {
+					throw new Error(`index of cachegroup ${parent?.cachegroup} not found in topologyNodeIndicesByCacheGroup`);
+				}
+				parents.push(index);
+			}
+			const topologyNode: ResponseTopologyNode = {
+				cachegroup,
+				parents,
+			};
+			topologyNodes.push(topologyNode);
+			topologyNodeIndicesByCacheGroup.set(cachegroup, topologyNodes.length - 1);
+			if (treeNode.children.length > 0) {
+				this.treeToTopologyInner(topologyNodeIndicesByCacheGroup, topologyNodes, topologyNode, treeNode.children);
+			}
+		}
+	}
+}

experimental/traffic-portal/src/app/core/core.module.ts

@@ -62,6 +62,7 @@ import { ServersTableComponent } from "./servers/servers-table/servers-table.com
 import { UpdateStatusComponent } from "./servers/update-status/update-status.component";
 import { StatusDetailsComponent } from "./statuses/status-details/status-details.component";
 import { StatusesTableComponent } from "./statuses/statuses-table/statuses-table.component";
+import { TopologyDetailsComponent } from "./topologies/topology-details/topology-details.component";
 import { TypeDetailComponent } from "./types/detail/type-detail.component";
 import { TypesTableComponent } from "./types/table/types-table.component";
 import { RoleDetailComponent } from "./users/roles/detail/role-detail.component";
@@ -114,6 +115,7 @@ export const ROUTES: Routes = [
 	{ component: ISOGenerationFormComponent, path: "iso-gen"},
 	{ component: ProfileDetailComponent, path: "profiles/:id"},
 	{ component: ProfileTableComponent, path: "profiles"},
+	{ component: TopologyDetailsComponent, path: "topologies/:name"},
 ].map(r => ({...r, canActivate: [AuthenticatedGuard]}));
 
 /**
@@ -167,6 +169,7 @@ export const ROUTES: Routes = [
 		ProfileDetailComponent,
 		CapabilitiesComponent,
 		CapabilityDetailsComponent,
+		TopologyDetailsComponent,
 	],
 	exports: [],
 	imports: [

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">
+		<mat-card-content class="container">
+			<mat-form-field>
+				<mat-label>Name</mat-label>
+				<input matInput type="text" name="name" required readonly disabled [(ngModel)]="topology.name">
+			</mat-form-field>
+			<mat-form-field *ngIf="!new">
+				<mat-label>Description</mat-label>
+				<textarea matInput name="description" [(ngModel)]="topology.description"></textarea>
+			</mat-form-field>
+		</mat-card-content>
+		<mat-card-content class="container">
+			<mat-tree [dataSource]="topologySource" [treeControl]="topologyControl">
+				<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+					<div class="mat-tree-node" matTreeNodeToggle mat-menu-item [attr.aria-label]="'Toggle ' + node.name">
+						{{node.name}}
+					</div>
+					<div class="expand-node" role="group">
+						<ng-container matTreeNodeOutlet></ng-container>
+					</div>
+					<!--<mat-divider *ngIf="(node)"></mat-divider>-->
+				</mat-nested-tree-node>
+			</mat-tree>
+		</mat-card-content>
+		<mat-card-actions align="end" class="actions-container">
+			<button mat-raised-button type="button" *ngIf="!new" color="warn" (click)="delete()">Delete</button>
+			<button mat-raised-button color="primary" type="submit">Save</button>
+		</mat-card-actions>
+	</form>
+</mat-card>

experimental/traffic-portal/src/app/core/topologies/topology-details/topology-details.component.scss

@@ -0,0 +1,16 @@
+/*
+* 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.
+*/
+.expand-node {
+	padding-left: 40px;
+}

experimental/traffic-portal/src/app/core/topologies/topology-details/topology-details.component.spec.ts

@@ -0,0 +1,34 @@
+/*
+* 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 { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { TopologyDetailsComponent } from "./topology-details.component";
+
+describe("TopologyDetailsComponent", () => {
+	let component: TopologyDetailsComponent;
+	let fixture: ComponentFixture<TopologyDetailsComponent>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [TopologyDetailsComponent]
+		});
+		fixture = TestBed.createComponent(TopologyDetailsComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it("should create", () => {
+		expect(component).toBeTruthy();
+	});
+});