Blame - apps/inbandtelemetry/int-gui2-lib/projects/int-gui2-lib/src/lib/intapp/intapp.component.html - onos

Davide Scano

b5ade98

2020-06-03 21:47:13 +0200

[diff] [blame^]

<!--

~

~ 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.

-->

<h2 style="font-weight: bold">In-band Network Telemetry (INT) Control

Application</h2>

</div>

<hr>

<h2>

INT Collector Configuration

</h2>

<h3>

Collector IPv4 address and UDP port

31

</h3>

32

33

<input type="text" placeholder="IPv4 address" [ngClass]="{ 'is-invalid': formConf.controls.colIp.errors }"

34

class="form-control" formControlName="colIp">

:

<div class="error-text" *ngIf="formConf.controls.colIp.errors.required"> Control IP is required</div>

39

<div class="error-text" *ngIf="formConf.controls.colIp.errors.pattern">Control IP must be a valid IP address</div>

40

</div>

41

42

<div class="error-text" *ngIf="formConf.controls.colPort.errors.required">Port is required</div>

43

<div class="error-text" *ngIf="formConf.controls.colPort.errors.pattern">Port must be a valid Port number</div>

</div>

Apply Configuration

</button>

</div>

</form>

</div>

</div>

<h2 style="font-weight: bold">In-band Network Telemetry (INT) Control

Application</h2>

</div>

<hr>

<h2>

INT Watchlist Rules

</h2>

<div>

<h3>

Create New Watchlist Rule

</h3>

<div>

<label>

<input type="text" placeholder="Source IP address" [ngClass]="{ 'is-invalid': formSend.controls.ip4SrcPrefix.errors }"

72

class="form-control" formControlName="ip4SrcPrefix">

</label>

<label>

<input type="text" placeholder="Dest IP address" [ngClass]="{ 'is-invalid': formSend.controls.ip4DstPrefix.errors }"

77

class="form-control" formControlName="ip4DstPrefix">

78

</label>

79

<label>

80

<input type="text" placeholder="Source port" [ngClass]="{ 'is-invalid': formSend.controls.l4SrcPort.errors }"

81

class="form-control" formControlName="l4SrcPort">

82

</label>

83

<label>

84

<input type="text" placeholder="Dest port" [ngClass]="{ 'is-invalid': formSend.controls.l4DstPort.errors }"

85

class="form-control" formControlName="l4DstPort">

</label>

<label>

Protocol

<option selected disabled hidden

91

style="display: none" value=''></option>

</select>

</label>

<div class="error-text" *ngIf="formSend.controls.ip4DstPrefix.errors.required"> Destination IP is required</div>

98

<div class="error-text" *ngIf="formSend.controls.ip4DstPrefix.errors.pattern">Destination IP must be a valid IP address</div>

99

</div>

100

101

<div class="error-text" *ngIf="formSend.controls.ip4SrcPrefix.errors.required">Source IP is required</div>

102

<div class="error-text" *ngIf="formSend.controls.ip4SrcPrefix.errors.pattern">Source IP must be a valid IP address</div>

103

</div>

104

105

<div class="error-text" *ngIf="formSend.controls.l4DstPort.errors.pattern">Destination Port must be a valid Port</div>

106

</div>

107

108

<div class="error-text" *ngIf="formSend.controls.l4SrcPort.errors.pattern">Source Port must be a valid Port</div>

</div>

</div>

<div>

<label>

<input type="checkbox"

117

(change)="onCheckboxChange(data.value, $event.target.checked)"/>

</label>

</div>

</div>

</div>

</div>

</div>

Apply Watchlist Rule

</button>

</div>

</form>

</div>

</div>

135

136

137

<h2>Installed Watchlist Rules ({{tableData.length}} total)</h2>

138

139

140

<onos-icon classes="{{ autoRefresh?'active refresh':'refresh'}}" iconId="refresh" iconSize="42"

141

toolTip="{{ autoRefreshTip }}"></onos-icon>

142

</div>

143

144

145

<onos-icon classes="{active: ctrlBtnState.selection}" iconId="garbage"

146

iconSize="42"></onos-icon>

</div>

</div>

</div>

<table>

<tr>

<td colId="srcAddr" sortable>Src Address</td>

159

<td colId="dstAddr" sortable>Dst Address</td>

160

161

162

<td colId="protocol" sortable>Protocol</td>

163

<td colId="metadata" sortable>Metadata</td>

</tr>

</table>

</div>

<table>

<td colspan="9">{{ annots.noRowsMsg }}</td>

171

</tr>

172

<tr *ngFor="let row of tableData | filter : tableDataFilter"

173

(click)="selectCallback($event, row)"

174

[ngClass]="{selected: row.id === selId, 'data-change': isChanged(row.id)}">

175

176

<onos-icon classes="{{ row._iconid_available}}"

177

iconId={{row._iconid_available}}></onos-icon>

178

</td>

179

180

<onos-icon classes="{{row._iconid_type? 'active-type':undefined}}"

181

iconId="{{row._iconid_type}}"></onos-icon>

182

</td>

183

184

<td>{{ row.srcAddr }}</td>

185

<td>{{ row.dstAddr}}</td>

186

<td>{{ row.srcPort}}</td>

187

<td>{{ row.dstPort }}</td>

188

<td>{{ row.protocol }}</td>

189

<td>{{ row.metadata }}</td>

</tr>

</table>

</div>

</div>

</div>

</div>