Gitiles
Code Review Sign In
osm.etsi.org / osm / NG-UI / 92379ec7de56dd396dec958868a3a5fb2bb03a41 / . / src / app / operational-view / OperationalViewComponent.html
blob: 128bcb3db68dbe77bd1b4438bca34951e6f07332 [file] [log] [blame]
<!--
Copyright 2020 TATA ELXSI
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.
Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
-->
<div class="d-flex flex-row justify-content-between">
<div class="d-flex align-items-center header-style">{{ 'PAGE.OPERATIONALDASHBOARD.TITLE' | translate }}
({{ 'PAGE.OPERATIONALDASHBOARD.MODELSUMMARY' | translate }})</div>
<page-reload></page-reload>
</div>
<div class="container-fluid p-0 m-0 mt-2">
<ng-container *ngIf="vcaDetails.length > 0 else noData">
<ngb-accordion #acc="ngbAccordion" class="juju-section" [closeOthers]="true" type="secondary"
activeIds="{{activeID}}">
<ngb-panel id="{{vcaDetail.ns_id}}" *ngFor="let vcaDetail of vcaDetails; let i = index;">
<ng-template ngbPanelHeader let-opened="opened">
<div class="d-flex align-items-center justify-content-between cursor-pointer title-bar"
(click)="acc.toggle(vcaDetail.ns_id);">
<span class="name-width">{{vcaDetail.vca_name}}</span>
<span class="id-width">{{vcaDetail.ns_id}}</span>
<button class="btn btn-sm btn-primary border-radius-default" placement="top" container="body"
ngbTooltip="{{ (opened ? 'CLOSE' : 'OPEN') | translate }}">
<i [ngClass]="{ 'fas': true, 'fa-angle-down': opened, 'fa-angle-right': !opened }"></i>
</button>
</div>
</ng-template>
<ng-template ngbPanelContent>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 p-1">
<div class="row my-2 justify-content-end align-items-center setting-section">
<div class="form-group align-items-center mb-0 text-end p-0">
<label class="col-form-label fw-bold text-primary">
{{ 'PAGE.OPERATIONALDASHBOARD.LIVELOAD' | translate}}
</label>
<!-- Live button switch -->
<label class="switch ms-1">
<input id="liveData{{i}}" type="checkbox" [checked]="vcaDetail.isLiveloading"
(change)="callLiveData($event.target.checked, vcaDetail.ns_id, i)">
<div class="slider round">
<span class="on">{{ 'ON' | translate }}</span>
<span class="off">{{ 'OFF' | translate }}</span>
</div>
</label>
<!-- Seconds button group -->
<div class="btn-group list action ms-2 seconds-btn-group" role="group"
*ngIf="vcaDetail.isLiveloading">
<button [disabled]="!vcaDetail.isLiveloading" type="button"
class="btn btn-primary"
[ngClass]="{'active': seconds.value === vcaDetail.timeOutSeconds}"
(click)="onSetTimerSelector(seconds.value, vcaDetail.ns_id, i)"
*ngFor="let seconds of setSeconds;">{{seconds.label}}</button>
</div>
</div>
</div>
</div>
</div>
<ng-container *ngFor="let modelVCAStatus of vcaDetail.vcaStatusModels; let i = index;">
<h5 class="fw-bold text-primary">
{{ 'PAGE.OPERATIONALDASHBOARD.MODEL' | translate }} {{i+1}} (Cloud/Region):
{{modelVCAStatus.model ? modelVCAStatus.model.cloud_tag : '-'}}/
{{modelVCAStatus.model ? modelVCAStatus.model.region : '-' }}
</h5>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 p-1">
<div class="row my-2 justify-content-between align-items-center filter-actions">
<div class="form-group align-items-center mb-0 p-0">
<button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} all{{i}} active"
type="button" (click)="showHideTables($event.target, 'all', i)">
{{ 'ALL' | translate }}
</button>
<button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} app{{i}}"
type="button" (click)="showHideTables($event.target, 'app', i)"
*ngIf="modelVCAStatus.applications.length > 0">
{{ 'PAGE.OPERATIONALDASHBOARD.APPLICATIONTITLE' | translate }} -
{{modelVCAStatus.applications.length > 0 ?
modelVCAStatus.applications.length : 0}}
</button>
<button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} unit{{i}}"
type="button" (click)="showHideTables($event.target, 'unit', i)"
*ngIf="modelVCAStatus.units.length > 0">
{{ 'PAGE.OPERATIONALDASHBOARD.UNITSTITLE' | translate }} -
{{modelVCAStatus.units.length > 0 ? modelVCAStatus.units.length : 0}}
</button>
<button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} machine{{i}}"
type="button" (click)="showHideTables($event.target, 'machine', i)"
*ngIf="modelVCAStatus.machines.length > 0">
{{ 'PAGE.OPERATIONALDASHBOARD.MACHINETITLE' | translate }} -
{{modelVCAStatus.machines.length > 0 ? modelVCAStatus.machines.length : 0}}
</button>
<button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} relation{{i}}"
type="button" (click)="showHideTables($event.target, 'relation', i)"
*ngIf="modelVCAStatus.relations.length > 0">
{{ 'PAGE.OPERATIONALDASHBOARD.RELATIONS' | translate }} -
{{modelVCAStatus.relations.length > 0 ? modelVCAStatus.relations.length :
0}}
</button>
</div>
<div class="form-group row align-items-center mb-0"
*ngIf="modelVCAStatus.executedActions !== undefined && modelVCAStatus.executedActions.length > 0">
<label class="col-form-label fw-bold text-primary">
{{ 'EXECUTEDACTIONS' | translate }}
</label>
<button type="button"
class="btn btn-sm btn-primary border border-radius-default ms-1"
(click)="showExecutedActionsList(modelVCAStatus.executedActions);">
<i class="fas fa-directions"></i>
</button>
</div>
</div>
<!-- Apps section -->
<table class="table table-sm filterTable{{i}} app{{i}}" id="app{{i}}"
*ngIf="modelVCAStatus.applications.length > 0">
<thead>
<tr>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.APPLICATION' | translate }}
</th>
<th scope="col">{{ 'STATUS' | translate }}</th>
<th scope="col">{{ 'SCALE' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.CHARM' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.STORE' | translate }}</th>
<th scope="col">{{ 'ACTIONS' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let application of modelVCAStatus.applications">
<th scope="row">
<i class="active-icon fa-circle"
[ngClass]="application.status ? application.status === 'active' ? 'fas text-success': application.status === 'waiting' ? 'fas text-warning' : application.status === 'blocked' ? 'fas text-danger' : 'far': ''">
</i>
{{application.app_id ? application.app_id : '-' }}
</th>
<td>{{application.status ? application.status : '-' }}</td>
<td>{{application.scale ? application.scale : 0 }}</td>
<td>{{application.charm ? application.charm : '-' }}</td>
<td>{{application.store ? application.store : '-' }}</td>
<td>
<div class="btn-group list action" role="group">
<button type="button" class="btn btn-primary"
(click)="showConfigList(application.configs);" placement="top"
container="body" ngbTooltip="{{ 'CONFIG' | translate }}"
[disabled]="application.configs === null">
<i class="fas fa-cogs"></i>
</button>
<button type="button" class="btn btn-primary"
(click)="showActionsList(application.actions);" placement="top"
container="body" ngbTooltip="{{ 'ACTIONS' | translate }}"
[disabled]="application.actions === null">
<i class="fas fa-receipt"></i>
</button>
</div>
</td>
</tr>
<tr class="text-center" *ngIf="modelVCAStatus.applications.length === 0">
<td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOAPPLICATION' | translate }}
</td>
</tr>
</tbody>
</table>
<!-- Units section -->
<table class="table table-sm filterTable{{i}} unit{{i}}" id="unit{{i}}"
*ngIf="modelVCAStatus.units.length > 0">
<thead>
<tr>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.UNITS' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.WORKLOAD' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.AGENT' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
<th scope="col">
{{ 'PUBLICADDRESS' | translate }} /
{{ 'PAGE.OPERATIONALDASHBOARD.ADDRESS' | translate }}
</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let unit of modelVCAStatus.units">
<th scope="row">
<i class="active-icon fa-circle"
[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': ''">
</i>
{{unit.unit_id ? unit.unit_id : '-'}} {{unit.leader !== null ? '(' +
('PAGE.OPERATIONALDASHBOARD.LEADER' | translate) + ')' : '' }}
</th>
<td>{{unit.workload_status ? unit.workload_status.status : '-'}}</td>
<td>{{unit.agent_status ? unit.agent_status.status : '-'}}</td>
<td>{{unit.machine ? unit.machine : '-'}}</td>
<td>
{{unit.public_address ? unit.public_address : unit.address ?
unit.address : '-'}}
</td>
<td>{{unit.workload_status ? unit.workload_status.info : '-'}}</td>
</tr>
<tr class="text-center" *ngIf="modelVCAStatus.units.length === 0">
<td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOUNITS' | translate }}</td>
</tr>
</tbody>
</table>
<!-- Machines section -->
<table class="table table-sm filterTable{{i}} machine{{i}}" id="machine{{i}}"
*ngIf="modelVCAStatus.machines.length > 0">
<thead>
<tr>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
<th scope="col">State</th>
<th scope="col">DNS</th>
<th scope="col">Instance ID</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.SERIES' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let machines of modelVCAStatus.machines">
<th scope="row">{{machines.id_ ? machines.id_ : '-'}}</th>
<td>{{machines.agent_status ? machines.agent_status.status : '-'}}</td>
<td>{{machines.dns_name !== null ? machines.dns_name : '-'}}</td>
<td>{{machines.instance_id ? machines.instance_id : '-'}}</td>
<td>{{machines.series ? machines.series : '-'}}</td>
<td>{{machines.instance_status ? machines.instance_status.info : '-'}}</td>
</tr>
<tr class="text-center" *ngIf="modelVCAStatus.machines.length === 0">
<td colspan="6">
{{ 'PAGE.OPERATIONALDASHBOARD.NOMACHINES' | translate }}
</td>
</tr>
</tbody>
</table>
<!-- Relations section -->
<table class="table table-sm filterTable{{i}} relation{{i}}" id="relation{{i}}"
*ngIf="modelVCAStatus.relations.length > 0">
<thead>
<tr>
<th scope="col">
{{ 'PAGE.OPERATIONALDASHBOARD.RELATIONPROVIDER' | translate }}
</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.REQUIRER' | translate }}</th>
<th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.INTERFACE' | translate }}</th>
<th scope="col">{{ 'TYPE' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let relation of modelVCAStatus.relations">
<th scope="row">{{relation.key ? relation.key : '-'}}</th>
<td>{{relation.key ? relation.key : '-'}}</td>
<td>{{relation.interface ? relation.interface : '-'}}</td>
<td>{{relation.endpoints[0].role ? relation.endpoints[0].role : '-'}}</td>
</tr>
<tr class="text-center" *ngIf="modelVCAStatus.relations.length === 0">
<td colspan="4">{{ 'PAGE.OPERATIONALDASHBOARD.NORELATIONS' | translate }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-container>
</ng-template>
</ngb-panel>
</ngb-accordion>
</ng-container>
<ng-template #noData>
<h5 class="text-center">{{ 'NODATA' | translate }}</h5>
</ng-template>
</div>
<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>