src/app/operational-view/OperationalViewComponent.html

   1 <!--
   2 Copyright 2020 TATA ELXSI
   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 Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 -->
  18 <div class="row d-flex flex-row justify-content-between">
  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">
  43                                 <div class="form-group row align-items-center mb-0">
  44                                     <label class="col-form-label font-weight-bold text-primary">
  45                                         {{ 'PAGE.OPERATIONALDASHBOARD.LIVELOAD' | translate}}
  46                                     </label>
  47                                     <!-- Live button switch -->
  48                                     <label class="switch ml-1">
  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 -->
  57                                     <div class="btn-group list action ml-2 seconds-btn-group" role="group"
  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;">
  70                         <h5 class="font-weight-bold text-primary">
  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">
  78                                     <div class="form-group row align-items-center mb-0">
  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">
 112                                         <label class="col-form-label font-weight-bold text-primary">
 113                                             {{ 'EXECUTEDACTIONS' | translate }}
 114                                         </label>
 115                                         <button type="button"
 116                                             class="btn btn-sm btn-primary border border-radius-default ml-1"
 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>