Skip to content

Commit

Permalink
[support] #62 (接続情報ページの大幅改修)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yoneyan
yoneyan committed Mar 15, 2021
1 parent f27cd3d commit 6e3634d
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 197 deletions.
0 ...p-detail/group-detail-create-network.html → ...etail/connection-detail-open-process.html
View file
File renamed without changes.
142 changes: 61 additions & 81 deletions src/app/dashboard/connection/connection-detail/connection-detail.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,57 @@
<div class="main">
<h2>ID: {{id}}</h2>
<ng-container *ngIf="loading">
<h2>ID: {{id}}</h2>
<h1>読み込み中...</h1>
</ng-container>
<ng-container *ngIf="!loading">
<h1>接続コード: {{connection.connection_type}}{{('0000' + connection.connection_number).slice(-3)}}</h1>
<h1>
ServiceCode:
{{connection.service.group_id}}-{{connection.service.service_template.type}}{{('000' + connection.service.service_number).slice(-3)}}-{{connection.connection_template.type}}{{('000' + connection.connection_number).slice(-3)}}
</h1>
<br>
<mat-tab-group>
<mat-tab label="情報">
<br>
<table>
<tr>
<th colspan="4">NOC</th>
</tr>
<ng-container *ngIf="connection.noc_id !== null">
<tr>
<th>ID</th>
<td colspan="1">{{connection.noc_id}}</td>
<th>LINK</th>
<td colspan="1">
<button mat-raised-button (click)="linkNOC(connection.noc_id)">リンク</button>
</td>
</tr>
<tr>
<th>Name</th>
<td colspan="1">{{connection.noc.name}}</td>
<th>Enable</th>
<td colspan="1">{{connection.noc.enable}}
</tr>
</ng-container>
</table>
<br>
<table>
<tr>
<th colspan="4">BGP Router</th>
</tr>
<ng-container *ngIf="connection.router_id !== null">
<ng-container *ngIf="connection.bgp_router_id !== 0">
<tr>
<th>ID</th>
<td colspan="1">{{connection.router_id}}</td>
<td colspan="1">{{connection.bgp_router_id}}</td>
<th>LINK</th>
<td colspan="1">
<button mat-raised-button (click)="linkRouter(connection.router_id)">リンク</button>
<button mat-raised-button (click)="linkRouter(connection.bgp_router_id)">リンク</button>
</td>
</tr>
<tr>
<th>HostName</th>
<td colspan="1">{{getRouterHostName(connection.router_id)}}</td>
<td colspan="1">{{connection.bgp_router.hostname}}</td>
<th>Enable</th>
<td colspan="1">{{getRouterEnable(connection.router_id)}}
<td colspan="1">{{connection.bgp_router.enable}}
</tr>
</ng-container>
</table>
Expand All @@ -35,20 +60,20 @@ <h1>接続コード: {{connection.connection_type}}{{('0000' + connection.connec
<tr>
<th colspan="4">Tunnel Endpoint Router</th>
</tr>
<ng-container *ngIf="connection.gateway_ip_id !== null">
<ng-container *ngIf="connection.tunnel_endpoint_router_ip_id !== 0">
<tr>
<th>ID</th>
<td colspan="1">{{connection.gateway_ip_id}}</td>
<td colspan="1">{{connection.tunnel_endpoint_router_ip_id}}</td>
<th>LINK</th>
<td colspan="1">
<button mat-raised-button (click)="linkGateway(connection.gateway_ip_id.ID)">リンク</button>
<button mat-raised-button (click)="linkGateway(connection.tunnel_endpoint_router_ip_id)">リンク</button>
</td>
</tr>
<tr>
<th>IP</th>
<td colspan="1">{{getTunnelEndpointIP(connection.gateway_ip_id)}}</td>
<td colspan="1">{{connection.tunnel_endpoint_router_ip.ip}}</td>
<th>Enable</th>
<td colspan="1">{{getTunnelEndpointEnable(connection.gateway_ip_id)}}
<td colspan="1">{{connection.tunnel_endpoint_router_ip.enable}}
</tr>
</ng-container>
</table>
Expand All @@ -73,45 +98,9 @@ <h1>接続コード: {{connection.connection_type}}{{('0000' + connection.connec
<th>Lock</th>
<td>{{connection.lock}}</td>
</tr>
<tr>
<th>Connection Type</th>
<td>{{connection.connection_type}}</td>
</tr>
<tr>
<th>connection Number</th>
<td>{{connection.connection_number}}</td>
</tr>
<tr>
<th>Network ID</th>
<td>{{connection.network_id}}</td>
</tr>
<tr>
<th>Group ID</th>
<td>{{connection.group_id}}</td>
</tr>
<tr>
<th>User ID</th>
<td>{{connection.user_id}}</td>
</tr>
<tr>
<th>BGP Router ID</th>
<td>{{connection.router_id}}</td>
</tr>
<tr>
<th>Tunnel Endpoint Router ID</th>
<td>{{connection.gateway_id}}</td>
</tr>
<tr>
<th>Fee</th>
<td>{{connection.fee}}</td>
</tr>
<tr>
<th>NOC</th>
<td>{{connection.noc}}</td>
</tr>
<tr>
<th>NTT</th>
<td>{{connection.ntt}}</td>
<td>{{connection.ntt_template.name}}</td>
</tr>
<tr>
<th>Term IP</th>
Expand Down Expand Up @@ -145,15 +134,11 @@ <h1>接続コード: {{connection.connection_type}}{{('0000' + connection.connec
<div class="main">
<p>Updateしたいデータを記入することで、その部分のみが更新されます。</p>
<form [formGroup]="connectionInput">
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Connection Type</mat-label>-->
<!-- <input matInput type="text" formControlName="connection_type">-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>Connection Type</mat-label>
<mat-select formControlName="connection_type" required>
<ng-container *ngFor="let c of this.connections">
<mat-option value="{{c.id}}">{{c.id}}({{c.name}})</mat-option>
<mat-select formControlName="connection_template_id" required>
<ng-container *ngFor="let c of this.templates.connections">
<mat-option [value]="c.ID">{{c.ID}}({{c.name}})</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
Expand All @@ -165,35 +150,45 @@ <h1>接続コード: {{connection.connection_type}}{{('0000' + connection.connec
<br>
<mat-form-field appearance="fill">
<mat-label>NOC</mat-label>
<input matInput type="text" formControlName="noc">
<mat-select formControlName="noc_id" required>
<ng-container *ngFor="let noc of this.templates.nocs">
<mat-option [value]="noc.ID">{{noc.ID}}({{noc.name}})</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
&nbsp;
<mat-form-field appearance="fill">
<mat-label>Network ID</mat-label>
<input matInput type="number" formControlName="network_id">
<mat-label>Service ID</mat-label>
<input matInput type="number" formControlName="service_id">
</mat-form-field>
&nbsp;
<mat-form-field appearance="fill">
<mat-label>RouterID (BGP)</mat-label>
<mat-select formControlName="router_id" required>
<ng-container *ngFor="let router of this.routers">
<mat-option value="{{router.ID}}">{{router.hostname}}</mat-option>
<mat-select formControlName="bgp_router_id" required>
<ng-container *ngFor="let router of this.templates.bgp_router">
<mat-option [value]="router.ID">{{router.hostname}}</mat-option>
</ng-container>
<mat-option [value]="0">なし<b>(初期値0)</b></mat-option>
</mat-select>
</mat-form-field>
&nbsp;
<mat-form-field appearance="fill">
<mat-label>GatewayID (ctepxxなど)</mat-label>
<mat-select formControlName="gateway_ip_id" required>
<mat-label>TunnelEndPointRouter IP (ctepxxなど)</mat-label>
<mat-select formControlName="tunnel_endpoint_router_ip_id" required>
<ng-container *ngFor="let gatewayIP of this.gatewayIPs">
<mat-option value="{{gatewayIP.ID}}">{{gatewayIP.ip}}</mat-option>
<mat-option [value]="gatewayIP.ID">{{gatewayIP.hostname}}<b>({{gatewayIP.ip}})</b></mat-option>
</ng-container>
<mat-option [value]="0">なし<b>(初期値0)</b></mat-option>
</mat-select>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>NTT</mat-label>
<input matInput type="text" formControlName="ntt">
<mat-select formControlName="ntt_template_id" required>
<ng-container *ngFor="let ntt of this.templates.ntts">
<mat-option [value]="ntt.ID">{{ntt.name}}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
Expand Down Expand Up @@ -221,21 +216,6 @@ <h1>接続コード: {{connection.connection_type}}{{('0000' + connection.connec
<input matInput type="text" formControlName="link_v6_your">
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Fee</mat-label>
<input matInput type="text" formControlName="fee">
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Group ID</mat-label>
<input matInput type="number" formControlName="group_id">
</mat-form-field>
&nbsp;
<mat-form-field appearance="fill">
<mat-label>User ID</mat-label>
<input matInput type="number" formControlName="user_id">
</mat-form-field>
<br>
<mat-checkbox formControlName="open">開通済み</mat-checkbox>
&nbsp;
<mat-checkbox formControlName="monitor">Monitor</mat-checkbox>
Expand Down
99 changes: 43 additions & 56 deletions src/app/dashboard/connection/connection-detail/connection-detail.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {CommonService} from '../../../service/common.service';
import {FormControl, FormGroup} from '@angular/forms';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {ConnectionService} from '../../../service/connection.service';
import {RouterService} from '../../../service/router.service';
import {GatewayIPService} from '../../../service/gateway-ip.service';

@Component({
selector: 'app-connection-detail',
Expand All @@ -18,25 +16,21 @@ export class ConnectionDetailComponent implements OnInit {
private router: Router,
public connectionService: ConnectionService,
private commonService: CommonService,
private routerService: RouterService,
private gatewayIPService: GatewayIPService,
) {
}

public id: string;
public connectionInput = new FormGroup({
ID: new FormControl(),
group_id: new FormControl(''),
user_id: new FormControl(''),
connection_type: new FormControl(''),
connection_number: new FormControl(''),
network_id: new FormControl(''),
service_id: new FormControl(''),
connection_template_id: new FormControl(Validators.pattern('^[0-9]*$')),
connection_number: new FormControl(),
noc_id: new FormControl(''),
router_id: new FormControl(''),
gateway_ip_id: new FormControl(''),
noc: new FormControl(''),
ntt: new FormControl(''),
ntt_template_id: new FormControl(''),
bgp_router_id: new FormControl(''),
tunnel_endpoint_router_ip_id: new FormControl(''),
term_ip: new FormControl(''),
fee: new FormControl(''),
link_v4_our: new FormControl(''),
link_v4_your: new FormControl(''),
link_v6_our: new FormControl(''),
Expand All @@ -52,7 +46,8 @@ export class ConnectionDetailComponent implements OnInit {
public services: any;
public connections: any;
public nocs: any;
public gatewayIPs: any;
public gatewayIPs: any[] = [];
public templates: any;

ngOnInit(): void {
this.id = this.route.snapshot.paramMap.get('id');
Expand All @@ -61,37 +56,46 @@ export class ConnectionDetailComponent implements OnInit {
this.connection = response.connection[0];
this.connectionInput.patchValue({
ID: response.connection[0].ID,
group_id: response.connection[0].group_id,
user_id: response.connection[0].user_id,
network_id: response.connection[0].network_id,
connection_type: response.connection[0].connection_type,
connection_number: response.connection[0].connection_number,
service_id: response.connection[0].service_id,
connection_template_id: Number(response.connection[0].connection_template_id),
connection_number: Number(response.connection[0].connection_number),
noc_id: Number(response.connection[0].noc_id),
router_id: response.connection[0].router_id,
gateway_ip_id: response.connection[0].gateway_ip_id,
ntt_template_id: response.connection[0].ntt_template_id,
bgp_router_id: response.connection[0].bgp_router_id,
tunnel_endpoint_router_ip_id: response.connection[0].tunnel_endpoint_router_ip_id,
open: response.connection[0].open,
lock: response.connection[0].lock,
monitor: response.connection[0].monitor,
});
console.log(this.connection);
console.log(this.connectionInput.value);
this.loading = false;

this.routerService.getAll().then((res1) => {
console.log(res1);
this.routers = res1.router;
this.gatewayIPService.getAll().then((res2) => {
console.log(res2);
this.gatewayIPs = res2.gateway_ip;
this.commonService.getService().then((res3) => {
console.log(res3);
this.connections = res3.connection;
this.loading = false;
this.commonService.openBar('OK', 5000);
});
});
this.commonService.getTemplate().then(template => {
this.templates = template;
console.log(this.templates);
for (const tmpNOC of this.templates.nocs) {
for (const tmpEndPoint of tmpNOC.tunnel_endpoint_router) {
for (const tmpEndPointIP of tmpEndPoint.tunnel_endpoint_router_ip) {
console.log(tmpNOC.ID, tmpNOC.name);
if (tmpNOC.enable && tmpEndPoint.enable && tmpEndPointIP.enable) {
this.gatewayIPs.push({
ID: Number(tmpEndPointIP.ID),
noc: tmpNOC.name,
hostname: tmpEndPoint.hostname,
ip: tmpEndPointIP.ip,
});
}
}
}
}
});
});
}

linkNOC(id: number): void {
this.router.navigate(['/dashboard/noc/' + id]).then();
}

linkRouter(id: number): void {
this.router.navigate(['/dashboard/gateway/' + id]).then();
}
Expand All @@ -100,32 +104,15 @@ export class ConnectionDetailComponent implements OnInit {
this.router.navigate(['/dashboard/gateway/' + id]).then();
}

getRouterHostName(id: number): string {
const tmp = this.routers.find(item => item.ID === id);
return tmp.hostname;
}

getRouterEnable(id: number): string {
const tmp = this.routers.find(item => item.ID === id);
return tmp.enable;
}

getTunnelEndpointIP(id: number): string {
const tmp = this.gatewayIPs.find(item => item.ID === id);
return tmp.ip;
}

getTunnelEndpointEnable(id: number): string {
const tmp = this.gatewayIPs.find(item => item.ID === id);
return tmp.enable;
}

update(): void {
console.log(this.connectionInput.value);
const json = JSON.stringify(this.connectionInput.getRawValue());
console.log(json);
this.connectionService.update(this.id, json).then(response => {
this.commonService.openBar('OK', 5000);
location.reload();
});
}


}
Loading

0 comments on commit 6e3634d

Please sign in to comment.