blob: 2d6b59a45c3d1c666afd643d0782ff9af3974152 [file] [log] [blame]
Davide Scano555617a2020-06-03 21:47:13 +02001<!--
2~ Copyright 2020-present Open Networking Foundation
3~
4~ Licensed under the Apache License, Version 2.0 (the "License");
5~ you may not use this file except in compliance with the License.
6~ You may obtain a copy of the License at
7~
8~ http://www.apache.org/licenses/LICENSE-2.0
9~
10~ Unless required by applicable law or agreed to in writing, software
11~ distributed under the License is distributed on an "AS IS" BASIS,
12~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13~ See the License for the specific language governing permissions and
14~ limitations under the License.
15-->
16<div id="ov-int-app-main">
17 <div class="tabular-header">
18 <h2 style="font-weight: bold">In-band Network Telemetry (INT) Control
19 Application</h2>
20 </div>
Davide Scano555617a2020-06-03 21:47:13 +020021 <hr>
Davide Scano555617a2020-06-03 21:47:13 +020022 <div class="tabular-header">
23 <h2>
Yi Tsengc4f90a52020-10-04 22:33:22 -070024 INT Watchlist Rules
Davide Scano555617a2020-06-03 21:47:13 +020025 </h2>
Yi Tsengc4f90a52020-10-04 22:33:22 -070026 <div>
27 <form [formGroup]="formSend" (ngSubmit)="sendIntIntentString()">
28 <div class="input-panel">
29 <h3>
30 Create New Watchlist Rule
31 </h3>
32 <div>
33 <label>
34 <input type="text" placeholder="Source IP prefix"
35 [ngClass]="{ 'is-invalid': formSend.controls.ip4SrcPrefix.errors }"
36 class="form-control" formControlName="ip4SrcPrefix">
37
38 </label>
39 <label>
40 <input type="text" placeholder="Dest IP prefix"
41 [ngClass]="{ 'is-invalid': formSend.controls.ip4DstPrefix.errors }"
42 class="form-control" formControlName="ip4DstPrefix">
43 </label>
44 <label>
45 <input type="text" placeholder="Source port"
46 [ngClass]="{ 'is-invalid': formSend.controls.l4SrcPort.errors }"
47 class="form-control" formControlName="l4SrcPort">
48 </label>
49 <label>
50 <input type="text" placeholder="Destination port"
51 [ngClass]="{ 'is-invalid': formSend.controls.l4DstPort.errors }"
52 class="form-control" formControlName="l4DstPort">
53 </label>
54 <label>
55 Protocol
56 <select name="protocol" formControlName="protocol">
57 <option selected disabled hidden
58 style="display: none" value=''></option>
59 <option value="TCP">TCP</option>
60 <option value="UDP">UDP</option>
61 </select>
62 </label>
Yi Tsengd14f1a32020-10-13 19:15:12 -070063 <label>
64 Telemetry Mode
65 <select name="telemetryMode" formControlName="telemetryMode">
66 <option selected value="POSTCARD">Postcard (INT-XD)</option>
67 <option value="INBAND_TELEMETRY">Embedded Data (INT-MD)</option>
68 </select>
69 </label>
Yi Tsengc4f90a52020-10-04 22:33:22 -070070 <div *ngIf="formSend.controls.ip4DstPrefix.errors" class="invalid-feedback">
71 <div class="error-text" *ngIf="formSend.controls.ip4DstPrefix.errors.required"> Destination
72 IP is required
73 </div>
74 <div class="error-text" *ngIf="formSend.controls.ip4DstPrefix.errors.pattern">Destination IP
75 must be a valid IP address
76 </div>
77 </div>
78 <div *ngIf="formSend.controls.ip4SrcPrefix.errors" class="invalid-feedback">
79 <div class="error-text" *ngIf="formSend.controls.ip4SrcPrefix.errors.required">Source IP is
80 required
81 </div>
82 <div class="error-text" *ngIf="formSend.controls.ip4SrcPrefix.errors.pattern">Source IP must
83 be a valid IP address
84 </div>
85 </div>
86 <div *ngIf="formSend.controls.l4DstPort.errors" class="invalid-feedback">
87 <div class="error-text" *ngIf="formSend.controls.l4DstPort.errors.pattern">Destination Port
88 must be a valid Port
89 </div>
90 </div>
91 <div *ngIf="formSend.controls.l4SrcPort.errors" class="invalid-feedback">
92 <div class="error-text" *ngIf="formSend.controls.l4SrcPort.errors.pattern">Source Port must
93 be a valid Port
94 </div>
95 </div>
96 </div>
97 <div>
98 <div class="myrow">
99 <div *ngFor="let data of metaData">
100 <div class="mygrid">
101 <label>
102 <input type="checkbox"
103 (change)="onCheckboxChange(data.value, $event.target.checked)"/>
104 {{ data.name }}
105 </label>
106 </div>
107 </div>
108 </div>
109 </div>
Davide Scano555617a2020-06-03 21:47:13 +0200110 </div>
Yi Tsengc4f90a52020-10-04 22:33:22 -0700111 <div class="button-panel">
Davide Scano555617a2020-06-03 21:47:13 +0200112 <button class="int-app-button">
Yi Tsengc4f90a52020-10-04 22:33:22 -0700113 Apply Watchlist Rule
Davide Scano555617a2020-06-03 21:47:13 +0200114 </button>
115 </div>
116 </form>
117 </div>
118 </div>
Davide Scano555617a2020-06-03 21:47:13 +0200119
120 <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
121 <div class='int-app-main-intents'>
122 <div class="tabular-header">
123 <h2>Installed Watchlist Rules ({{tableData.length}} total)</h2>
124 <div class="ctrl-btns">
125 <div class="refresh" (click)="toggleRefresh()">
126 <onos-icon classes="{{ autoRefresh?'active refresh':'refresh'}}" iconId="refresh" iconSize="42"
127 toolTip="{{ autoRefreshTip }}"></onos-icon>
128 </div>
129 <!-- tooltip tt-msg="uninstallTip" -->
130 <div (click)="delIntIntent()">
131 <onos-icon classes="{active: ctrlBtnState.selection}" iconId="garbage"
132 iconSize="42"></onos-icon>
133 </div>
134 </div>
135 </div>
136
137 <div id="summary-list" class="summary-list" onosTableResize>
138 <div class="table-header">
139 <table>
140 <tr>
141 <td colId="available" class="table-icon"></td>
142 <td colId="type" class="table-icon"></td>
143 <td colId="id">ID</td>
144 <td colId="srcAddr" sortable>Src Address</td>
145 <td colId="dstAddr" sortable>Dst Address</td>
146 <td colId="srcPort" sortable>Src Port</td>
147 <td colId="dstPort" sortable>Dst Port</td>
148 <td colId="protocol" sortable>Protocol</td>
149 <td colId="metadata" sortable>Metadata</td>
Yi Tsengd14f1a32020-10-13 19:15:12 -0700150 <td colId="telemetryMode" sortable>Telemetry Mode</td>
Davide Scano555617a2020-06-03 21:47:13 +0200151 </tr>
152 </table>
153 </div>
154 <div class="table-body">
155 <table>
156 <tr class="table-body" *ngIf="tableData.length === 0" class="no-data">
157 <td colspan="9">{{ annots.noRowsMsg }}</td>
158 </tr>
159 <tr *ngFor="let row of tableData | filter : tableDataFilter"
160 (click)="selectCallback($event, row)"
161 [ngClass]="{selected: row.id === selId, 'data-change': isChanged(row.id)}">
162 <td class="table-icon">
163 <onos-icon classes="{{ row._iconid_available}}"
164 iconId={{row._iconid_available}}></onos-icon>
165 </td>
166 <td class="table-icon">
167 <onos-icon classes="{{row._iconid_type? 'active-type':undefined}}"
168 iconId="{{row._iconid_type}}"></onos-icon>
169 </td>
170 <td>{{ row.id }}</td>
171 <td>{{ row.srcAddr }}</td>
172 <td>{{ row.dstAddr}}</td>
173 <td>{{ row.srcPort}}</td>
174 <td>{{ row.dstPort }}</td>
175 <td>{{ row.protocol }}</td>
176 <td>{{ row.metadata }}</td>
Yi Tsengd14f1a32020-10-13 19:15:12 -0700177 <td>{{ row.telemetryMode }}</td>
Davide Scano555617a2020-06-03 21:47:13 +0200178 </tr>
179 </table>
180 </div>
181 </div>
182 </div>
183</div>