Gitiles
Code Review Sign In
osm.etsi.org / osm / NG-UI / c84f1123f8ba69f9e2211b2d816bb415e595efaa / . / src / app / operational-view / OperationalViewComponent.html
blob: 128bcb3db68dbe77bd1b4438bca34951e6f07332 [file] [log] [blame]
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]1<!--
2Copyright 2020 TATA ELXSI
3
4Licensed under the Apache License, Version 2.0 (the 'License');
5you may not use this file except in compliance with the License.
6You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10Unless required by applicable law or agreed to in writing, software
11distributed under the License is distributed on an "AS IS" BASIS,
12WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13See the License for the specific language governing permissions and
14limitations under the License.
15
16Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
17-->
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]18<div class="d-flex flex-row justify-content-between">
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]19 <div class="d-flex align-items-center header-style">{{ 'PAGE.OPERATIONALDASHBOARD.TITLE' | translate }}
20 ({{ 'PAGE.OPERATIONALDASHBOARD.MODELSUMMARY' | translate }})</div>
21 <page-reload></page-reload>
22</div>
23<div class="container-fluid p-0 m-0 mt-2">
24 <ng-container *ngIf="vcaDetails.length > 0 else noData">
25 <ngb-accordion #acc="ngbAccordion" class="juju-section" [closeOthers]="true" type="secondary"
26 activeIds="{{activeID}}">
27 <ngb-panel id="{{vcaDetail.ns_id}}" *ngFor="let vcaDetail of vcaDetails; let i = index;">
28 <ng-template ngbPanelHeader let-opened="opened">
29 <div class="d-flex align-items-center justify-content-between cursor-pointer title-bar"
30 (click)="acc.toggle(vcaDetail.ns_id);">
31 <span class="name-width">{{vcaDetail.vca_name}}</span>
32 <span class="id-width">{{vcaDetail.ns_id}}</span>
33 <button class="btn btn-sm btn-primary border-radius-default" placement="top" container="body"
34 ngbTooltip="{{ (opened ? 'CLOSE' : 'OPEN') | translate }}">
35 <i [ngClass]="{ 'fas': true, 'fa-angle-down': opened, 'fa-angle-right': !opened }"></i>
36 </button>
37 </div>
38 </ng-template>
39 <ng-template ngbPanelContent>
40 <div class="row">
41 <div class="col-lg-12 col-md-12 col-sm-12 p-1">
42 <div class="row my-2 justify-content-end align-items-center setting-section">
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]43 <div class="form-group align-items-center mb-0 text-end p-0">
44 <label class="col-form-label fw-bold text-primary">
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]45 {{ 'PAGE.OPERATIONALDASHBOARD.LIVELOAD' | translate}}
46 </label>
47 <!-- Live button switch -->
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]48 <label class="switch ms-1">
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]49 <input id="liveData{{i}}" type="checkbox" [checked]="vcaDetail.isLiveloading"
50 (change)="callLiveData($event.target.checked, vcaDetail.ns_id, i)">
51 <div class="slider round">
52 <span class="on">{{ 'ON' | translate }}</span>
53 <span class="off">{{ 'OFF' | translate }}</span>
54 </div>
55 </label>
56 <!-- Seconds button group -->
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]57 <div class="btn-group list action ms-2 seconds-btn-group" role="group"
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]58 *ngIf="vcaDetail.isLiveloading">
59 <button [disabled]="!vcaDetail.isLiveloading" type="button"
60 class="btn btn-primary"
61 [ngClass]="{'active': seconds.value === vcaDetail.timeOutSeconds}"
62 (click)="onSetTimerSelector(seconds.value, vcaDetail.ns_id, i)"
63 *ngFor="let seconds of setSeconds;">{{seconds.label}}</button>
64 </div>
65 </div>
66 </div>
67 </div>
68 </div>
69 <ng-container *ngFor="let modelVCAStatus of vcaDetail.vcaStatusModels; let i = index;">
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]70 <h5 class="fw-bold text-primary">
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]71 {{ 'PAGE.OPERATIONALDASHBOARD.MODEL' | translate }} {{i+1}} (Cloud/Region):
72 {{modelVCAStatus.model ? modelVCAStatus.model.cloud_tag : '-'}}/
73 {{modelVCAStatus.model ? modelVCAStatus.model.region : '-' }}
74 </h5>
75 <div class="row">
76 <div class="col-lg-12 col-md-12 col-sm-12 p-1">
77 <div class="row my-2 justify-content-between align-items-center filter-actions">
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]78 <div class="form-group align-items-center mb-0 p-0">
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]79 <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} all{{i}} active"
80 type="button" (click)="showHideTables($event.target, 'all', i)">
81 {{ 'ALL' | translate }}
82 </button>
83 <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} app{{i}}"
84 type="button" (click)="showHideTables($event.target, 'app', i)"
85 *ngIf="modelVCAStatus.applications.length > 0">
86 {{ 'PAGE.OPERATIONALDASHBOARD.APPLICATIONTITLE' | translate }} -
87 {{modelVCAStatus.applications.length > 0 ?
88 modelVCAStatus.applications.length : 0}}
89 </button>
90 <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} unit{{i}}"
91 type="button" (click)="showHideTables($event.target, 'unit', i)"
92 *ngIf="modelVCAStatus.units.length > 0">
93 {{ 'PAGE.OPERATIONALDASHBOARD.UNITSTITLE' | translate }} -
94 {{modelVCAStatus.units.length > 0 ? modelVCAStatus.units.length : 0}}
95 </button>
96 <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} machine{{i}}"
97 type="button" (click)="showHideTables($event.target, 'machine', i)"
98 *ngIf="modelVCAStatus.machines.length > 0">
99 {{ 'PAGE.OPERATIONALDASHBOARD.MACHINETITLE' | translate }} -
100 {{modelVCAStatus.machines.length > 0 ? modelVCAStatus.machines.length : 0}}
101 </button>
102 <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} relation{{i}}"
103 type="button" (click)="showHideTables($event.target, 'relation', i)"
104 *ngIf="modelVCAStatus.relations.length > 0">
105 {{ 'PAGE.OPERATIONALDASHBOARD.RELATIONS' | translate }} -
106 {{modelVCAStatus.relations.length > 0 ? modelVCAStatus.relations.length :
107 0}}
108 </button>
109 </div>
110 <div class="form-group row align-items-center mb-0"
111 *ngIf="modelVCAStatus.executedActions !== undefined && modelVCAStatus.executedActions.length > 0">
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]112 <label class="col-form-label fw-bold text-primary">
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]113 {{ 'EXECUTEDACTIONS' | translate }}
114 </label>
115 <button type="button"
SANDHYA.JSc84f1122024-06-04 21:50:03 +0530[diff] [blame^]116 class="btn btn-sm btn-primary border border-radius-default ms-1"
Barath Kumar Rf2ae5462021-03-01 12:52:33 +0530[diff] [blame]117 (click)="showExecutedActionsList(modelVCAStatus.executedActions);">
118 <i class="fas fa-directions"></i>
119 </button>
120 </div>
121 </div>
122 <!-- Apps section -->
123 <table class="table table-sm filterTable{{i}} app{{i}}" id="app{{i}}"
124 *ngIf="modelVCAStatus.applications.length > 0">
125 <thead>
126 <tr>
127 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.APPLICATION' | translate }}
128 </th>
129 <th scope="col">{{ 'STATUS' | translate }}</th>
130 <th scope="col">{{ 'SCALE' | translate }}</th>
131 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.CHARM' | translate }}</th>
132 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.STORE' | translate }}</th>
133 <th scope="col">{{ 'ACTIONS' | translate }}</th>
134 </tr>
135 </thead>
136 <tbody>
137 <tr *ngFor="let application of modelVCAStatus.applications">
138 <th scope="row">
139 <i class="active-icon fa-circle"
140 [ngClass]="application.status ? application.status === 'active' ? 'fas text-success': application.status === 'waiting' ? 'fas text-warning' : application.status === 'blocked' ? 'fas text-danger' : 'far': ''">
141 </i>
142 {{application.app_id ? application.app_id : '-' }}
143 </th>
144 <td>{{application.status ? application.status : '-' }}</td>
145 <td>{{application.scale ? application.scale : 0 }}</td>
146 <td>{{application.charm ? application.charm : '-' }}</td>
147 <td>{{application.store ? application.store : '-' }}</td>
148 <td>
149 <div class="btn-group list action" role="group">
150 <button type="button" class="btn btn-primary"
151 (click)="showConfigList(application.configs);" placement="top"
152 container="body" ngbTooltip="{{ 'CONFIG' | translate }}"
153 [disabled]="application.configs === null">
154 <i class="fas fa-cogs"></i>
155 </button>
156 <button type="button" class="btn btn-primary"
157 (click)="showActionsList(application.actions);" placement="top"
158 container="body" ngbTooltip="{{ 'ACTIONS' | translate }}"
159 [disabled]="application.actions === null">
160 <i class="fas fa-receipt"></i>
161 </button>
162 </div>
163 </td>
164 </tr>
165 <tr class="text-center" *ngIf="modelVCAStatus.applications.length === 0">
166 <td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOAPPLICATION' | translate }}
167 </td>
168 </tr>
169 </tbody>
170 </table>
171 <!-- Units section -->
172 <table class="table table-sm filterTable{{i}} unit{{i}}" id="unit{{i}}"
173 *ngIf="modelVCAStatus.units.length > 0">
174 <thead>
175 <tr>
176 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.UNITS' | translate }}</th>
177 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.WORKLOAD' | translate }}</th>
178 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.AGENT' | translate }}</th>
179 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
180 <th scope="col">
181 {{ 'PUBLICADDRESS' | translate }} /
182 {{ 'PAGE.OPERATIONALDASHBOARD.ADDRESS' | translate }}
183 </th>
184 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
185 </tr>
186 </thead>
187 <tbody>
188 <tr *ngFor="let unit of modelVCAStatus.units">
189 <th scope="row">
190 <i class="active-icon fa-circle"
191 [ngClass]="unit.workload_status ? unit.workload_status.status === 'active' ? 'fas text-success': unit.workload_status.status === 'waiting' ? 'fas text-warning' : unit.workload_status.status === 'blocked' ? 'fas text-danger' : 'far': ''">
192 </i>
193 {{unit.unit_id ? unit.unit_id : '-'}} {{unit.leader !== null ? '(' +
194 ('PAGE.OPERATIONALDASHBOARD.LEADER' | translate) + ')' : '' }}
195 </th>
196 <td>{{unit.workload_status ? unit.workload_status.status : '-'}}</td>
197 <td>{{unit.agent_status ? unit.agent_status.status : '-'}}</td>
198 <td>{{unit.machine ? unit.machine : '-'}}</td>
199 <td>
200 {{unit.public_address ? unit.public_address : unit.address ?
201 unit.address : '-'}}
202 </td>
203 <td>{{unit.workload_status ? unit.workload_status.info : '-'}}</td>
204 </tr>
205 <tr class="text-center" *ngIf="modelVCAStatus.units.length === 0">
206 <td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOUNITS' | translate }}</td>
207 </tr>
208 </tbody>
209 </table>
210 <!-- Machines section -->
211 <table class="table table-sm filterTable{{i}} machine{{i}}" id="machine{{i}}"
212 *ngIf="modelVCAStatus.machines.length > 0">
213 <thead>
214 <tr>
215 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
216 <th scope="col">State</th>
217 <th scope="col">DNS</th>
218 <th scope="col">Instance ID</th>
219 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.SERIES' | translate }}</th>
220 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
221 </tr>
222 </thead>
223 <tbody>
224 <tr *ngFor="let machines of modelVCAStatus.machines">
225 <th scope="row">{{machines.id_ ? machines.id_ : '-'}}</th>
226 <td>{{machines.agent_status ? machines.agent_status.status : '-'}}</td>
227 <td>{{machines.dns_name !== null ? machines.dns_name : '-'}}</td>
228 <td>{{machines.instance_id ? machines.instance_id : '-'}}</td>
229 <td>{{machines.series ? machines.series : '-'}}</td>
230 <td>{{machines.instance_status ? machines.instance_status.info : '-'}}</td>
231 </tr>
232 <tr class="text-center" *ngIf="modelVCAStatus.machines.length === 0">
233 <td colspan="6">
234 {{ 'PAGE.OPERATIONALDASHBOARD.NOMACHINES' | translate }}
235 </td>
236 </tr>
237 </tbody>
238 </table>
239 <!-- Relations section -->
240 <table class="table table-sm filterTable{{i}} relation{{i}}" id="relation{{i}}"
241 *ngIf="modelVCAStatus.relations.length > 0">
242 <thead>
243 <tr>
244 <th scope="col">
245 {{ 'PAGE.OPERATIONALDASHBOARD.RELATIONPROVIDER' | translate }}
246 </th>
247 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.REQUIRER' | translate }}</th>
248 <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.INTERFACE' | translate }}</th>
249 <th scope="col">{{ 'TYPE' | translate }}</th>
250 </tr>
251 </thead>
252 <tbody>
253 <tr *ngFor="let relation of modelVCAStatus.relations">
254 <th scope="row">{{relation.key ? relation.key : '-'}}</th>
255 <td>{{relation.key ? relation.key : '-'}}</td>
256 <td>{{relation.interface ? relation.interface : '-'}}</td>
257 <td>{{relation.endpoints[0].role ? relation.endpoints[0].role : '-'}}</td>
258 </tr>
259 <tr class="text-center" *ngIf="modelVCAStatus.relations.length === 0">
260 <td colspan="4">{{ 'PAGE.OPERATIONALDASHBOARD.NORELATIONS' | translate }}
261 </td>
262 </tr>
263 </tbody>
264 </table>
265 </div>
266 </div>
267 </ng-container>
268 </ng-template>
269 </ngb-panel>
270 </ngb-accordion>
271 </ng-container>
272 <ng-template #noData>
273 <h5 class="text-center">{{ 'NODATA' | translate }}</h5>
274 </ng-template>
275</div>
276<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>