shamrickus commented on code in PR #7466: URL: https://github.com/apache/trafficcontrol/pull/7466#discussion_r1180472608
########## experimental/traffic-portal/src/app/core/profiles/profile-detail/profile-detail.component.html: ########## @@ -0,0 +1,61 @@ +<!-- Review Comment: This file has mixed spaces and tabs, should be tabs ########## experimental/traffic-portal/src/app/core/profiles/profile-detail/profile-detail.component.ts: ########## @@ -0,0 +1,151 @@ +/* +* 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 { Component, OnInit } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { ActivatedRoute, Router } from "@angular/router"; +import { ProfileType, ResponseCDN, ResponseProfile } from "trafficops-types"; + +import { CDNService, ProfileService } from "src/app/api"; +import { DecisionDialogComponent } from "src/app/shared/dialogs/decision-dialog/decision-dialog.component"; +import { NavigationService } from "src/app/shared/navigation/navigation.service"; + +/** + * ProfileDetailComponent is the controller for the profile add/edit form. + */ +@Component({ + selector: "tp-profile-detail", + styleUrls: ["./profile-detail.component.scss"], + templateUrl: "./profile-detail.component.html" +}) +export class ProfileDetailComponent implements OnInit { + public new = false; + + /** Loader status for the actions */ + public loading = true; + + /** All details of profile requested */ + public profile!: ResponseProfile; + + /** All cdns used for profile creation as input */ + public cdns!: ResponseCDN[]; + + public types = [ Review Comment: These values are provided by the `ProfileType` enum. Not sure if those can be directly bound to a select - if they can it should just use `ProfileType` then. If not, these values should be `ProfileType.ATS_PROFILE` instead of 'hardcoded' strings. ########## experimental/traffic-portal/src/app/core/profiles/profile-detail/profile-detail.component.html: ########## @@ -0,0 +1,61 @@ +<!-- +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> + <tp-loading *ngIf="loading"></tp-loading> + <form ngNativeValidate (ngSubmit)="submit($event)" *ngIf="profile"> + <mat-card-content> + <mat-form-field *ngIf="!new"> + <mat-label>ID</mat-label> + <input matInput type="text" name="id" disabled readonly [defaultValue]="profile['id']" /> + </mat-form-field> + <mat-form-field> + <mat-label>Name</mat-label> + <input matInput type="text" name="name" [(ngModel)]="profile['name']" [ngModelOptions]="{standalone: true}" required /> + </mat-form-field> + <mat-form-field> + <mat-label>CDN</mat-label> + <mat-select name="cdn" [(ngModel)]="profile['cdn']" [ngModelOptions]="{standalone: true}" required> Review Comment: When creating a new profile, if this field is left blank, pressing the submit button will send the request instead of focusing this field and requesting input (works currently for name and description) ########## experimental/traffic-portal/src/app/core/profiles/profile-detail/profile-detail.component.scss: ########## @@ -0,0 +1,26 @@ +/* +* 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 { + margin: 1em auto; + width: 80%; + min-width: 350px; + + mat-card-content { + display: grid; + grid-template-columns: 1fr; + grid-row-gap: 2em; + margin: 1em auto 50px; + } +} Review Comment: Missing newline at end of file ########## experimental/traffic-portal/src/app/core/profiles/profile-detail/profile-detail.component.ts: ########## @@ -0,0 +1,151 @@ +/* +* 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 { Component, OnInit } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { ActivatedRoute, Router } from "@angular/router"; +import { ProfileType, ResponseCDN, ResponseProfile } from "trafficops-types"; + +import { CDNService, ProfileService } from "src/app/api"; +import { DecisionDialogComponent } from "src/app/shared/dialogs/decision-dialog/decision-dialog.component"; +import { NavigationService } from "src/app/shared/navigation/navigation.service"; + +/** + * ProfileDetailComponent is the controller for the profile add/edit form. + */ +@Component({ + selector: "tp-profile-detail", + styleUrls: ["./profile-detail.component.scss"], + templateUrl: "./profile-detail.component.html" +}) +export class ProfileDetailComponent implements OnInit { + public new = false; + + /** Loader status for the actions */ + public loading = true; + + /** All details of profile requested */ + public profile!: ResponseProfile; + + /** All cdns used for profile creation as input */ + public cdns!: ResponseCDN[]; + + public types = [ + { value: "ATS_PROFILE" }, + { value: "TR_PROFILE" }, + { value: "TM_PROFILE" }, + { value: "TS_PROFILE" }, + { value: "TP_PROFILE" }, + { value: "INFLUXDB_PROFILE" }, + { value: "RIAK_PROFILE" }, + { value: "SPLUNK_PROFILE" }, + { value: "DS_PROFILE" }, + { value: "ORG_PROFILE" }, + { value: "KAFKA_PROFILE" }, + { value: "LOGSTASH_PROFILE" }, + { value: "ES_PROFILE" }, + { value: "UNK_PROFILE" }, + { value: "GROVE_PROFILE" } + ]; + + /** + * Constructor. + * + * @param api The Profiles API which is used to provide functions for create, edit and delete profiles. + * @param cdnService The CDN service API which is used to provide cdns. + * @param dialog Dialog manager + * @param navSvc Manages the header + * @param route A reference to the route of this view which is used to get the 'id' query parameter of profile. + * @param router Angular router + */ + constructor( + private readonly api: ProfileService, + private readonly cdnService: CDNService, + private readonly dialog: MatDialog, + private readonly navSvc: NavigationService, + private readonly route: ActivatedRoute, + private readonly router: Router + ) { } + + /** + * Angular lifecycle hook where data is initialized. + */ + public async ngOnInit(): Promise<void> { + // Getting id from the route + const id = this.route.snapshot.paramMap.get("id"); + + this.cdns = await this.cdnService.getCDNs(); + if (id && id !== "new") { + const numID = parseInt(id, 10); + if (Number.isNaN(numID)) { + throw new Error(`route parameter 'id' was non-number: ${{ id }}`); + } else { + this.profile = await this.api.getProfiles(Number(id)); + this.navSvc.headerTitle.next(`Profile: ${this.profile.name}`); + } + this.loading = false; + } else { + this.new = true; + this.navSvc.headerTitle.next("New Profile"); + this.profile = { + cdn: -1, + cdnName: "", + description: "", + id: -1, + lastUpdated: new Date(), + name: "", + routingDisabled: false, + type: ProfileType.ATS_PROFILE + }; + this.loading = false; + } + } + + /** + * Submits new/updated type. + * + * @param e HTML form submission event. + */ + public async submit(e: Event): Promise<void> { + e.preventDefault(); + e.stopPropagation(); + if(this.new) { + this.profile = await this.api.createProfile(this.profile); + this.new = false; + } else { + this.profile = await this.api.updateProfile(this.profile); + } + } + + /** + * Deletes the current type. + */ + public async deleteType(): Promise<void> { Review Comment: Probably copy+paste oversight, should be `deleteProfile` ########## experimental/traffic-portal/src/app/core/profiles/profile-detail/profile-detail.component.html: ########## @@ -0,0 +1,61 @@ +<!-- +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> + <tp-loading *ngIf="loading"></tp-loading> Review Comment: This is missing title buttons that provides the following (added links to the TPv1 requests if you wanna see how we do it in angularjs): * View Servers * Clone [Profile](https://github.com/apache/trafficcontrol/blob/43e0af1f9e50f8e63639c4e83f5a8bb1aabcc7b0/traffic_portal/app/src/common/api/ProfileService.js#L102) * Export [Profile](https://github.com/apache/trafficcontrol/blob/43e0af1f9e50f8e63639c4e83f5a8bb1aabcc7b0/traffic_portal/app/src/common/api/ProfileService.js#L116) * Queue Updates by [Profile](https://github.com/apache/trafficcontrol/blob/43e0af1f9e50f8e63639c4e83f5a8bb1aabcc7b0/traffic_portal/app/src/common/api/ProfileService.js#L141) * Clear Updates by [Profile](https://github.com/apache/trafficcontrol/blob/43e0af1f9e50f8e63639c4e83f5a8bb1aabcc7b0/traffic_portal/app/src/common/api/ProfileService.js#L154) -- 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]
