src/app/dashboard/DashboardComponent.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: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 -->
  18 <div class="row dashboard">
  19     <div class="col-xs-9 col-sm-12 col-md-12 col-lg-9 col-xl-9 p-0">
  20         <div class="row instances">
  21             <div class="col-xs-8 col-sm-8 col-md-12 col-lg-8 col-xl-8">
  22                 <div class="custom-card card mb-3 text-center graph-section">
  23                     <div class="card-title">
  24                         <h6 class="font-weight-bold" *ngIf="nsRunningInstance.length">
  25                             {{'PAGE.DASHBOARD.UPTIME' | translate}} {{'PAGE.DASHBOARD.RUNNINGINSTANCES' | translate}}
  26                         </h6>
  27                         <h6 *ngIf="!nsRunningInstance.length">
  28                             <span> {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</span>
  29                         </h6>
  30                         <div [ngClass]="{'show-canvas':nsRunningInstance.length}" class="instances-canvas">
  31                             <canvas id="canvas"></canvas>
  32                         </div>
  33                     </div>
  34                 </div>
  35                 <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
  36             </div>
  37             <div class="col-xs-4 col-sm-4 col-md-12 col-lg-4 col-xl-4">
  38                 <div class="custom-card card card mb-3">
  39                     <div class="card-header custom-card-header">
  40                         {{'PAGE.DASHBOARD.FAILEDINSTANCES' | translate}}
  41                     </div>
  42                     <div class="card-body list-overflow failed-instances">
  43                         <ul class="list-group">
  44                             <li class="list-group-item text-left" *ngIf="!nsFailedInstances.length">
  45                                 {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</li>
  46                             <li class="list-group-item text-left d-flex justify-content-between align-items-center"
  47                                 *ngFor="let nsFailedInstance of nsFailedInstances">
  48                                 <span class="text-truncate">{{nsFailedInstance.name}}</span>
  49                                 <ng-template #popTitle>
  50                                     <strong>{{nsFailedInstance.name}}</strong>
  51                                     <button class="button-xs close" type="button" (click)="p.close()">
  52                                         <i class="fas fa-times-circle text-danger"></i>
  53                                     </button>
  54                                 </ng-template>
  55                                 <span class="badge badge-pill">
  56                                     <i placement="left" container="body"
  57                                         ngbPopover="{{'DETAILEDSTATUS' | translate}}: {{nsFailedInstance['detailed-status']}}"
  58                                         triggers="manual" #p="ngbPopover" (click)="p.open()" [autoClose]="'outside'"
  59                                         [popoverTitle]="popTitle"
  60                                         class="fas fa-exclamation-circle text-danger float-left"></i></span>
  61                             </li>
  62                         </ul>
  63                     </div>
  64                 </div>
  65                 <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
  66             </div>
  67         </div>
  68         <div class="row module-counts">
  69             <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
  70                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
  71                     <div class="status-card custom-card card-hover card aqua-card" routerLink="/packages/ns">
  72                         <i class="fas fa-box-open"></i>
  73                         <h3>{{ (nsdPackageCount)?nsdPackageCount:0 }}</h3>
  74                         <h6>{{'NSPACKAGES' | translate}}</h6>
  75                         <span class="link-icon">
  76                             <i class="fa fa-link" aria-hidden="true"></i>
  77                         </span>
  78                     </div>
  79                 </div>
  80                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
  81                     <div class="status-card custom-card card-hover card aqua-card" routerLink="/instances/ns">
  82                         <i class="fas fa-sitemap"></i>
  83                         <h3>{{ (nsInstanceCount)?nsInstanceCount:0 }}</h3>
  84                         <h6>{{'NSINSTANCES' | translate}}</h6>
  85                         <span class="link-icon">
  86                             <i class="fa fa-link" aria-hidden="true"></i>
  87                         </span>
  88                     </div>
  89                 </div>
  90             </div>
  91             <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
  92                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
  93                     <div class="status-card custom-card card-hover card purple-card" routerLink="/packages/vnf">
  94                         <i class="fas fa-box-open"></i>
  95                         <h3>{{ (vnfdPackageCount)?vnfdPackageCount:0 }}</h3>
  96                         <h6>{{'VNFPACKAGES' | translate}}</h6>
  97                         <span class="link-icon">
  98                             <i class="fa fa-link" aria-hidden="true"></i>
  99                         </span>
 100                     </div>
 101                 </div>
 102                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
 103                     <div class="status-card custom-card card-hover card purple-card" routerLink="/instances/vnf">
 104                         <i class="fas fa-hdd"></i>
 105                         <h3>{{ (vnfInstanceCount)?vnfInstanceCount:0 }}</h3>
 106                         <h6>{{'VNFINSTANCES' | translate}}</h6>
 107                         <span class="link-icon">
 108                             <i class="fa fa-link" aria-hidden="true"></i>
 109                         </span>
 110                     </div>
 111                 </div>
 112             </div>
 113             <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
 114                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
 115                     <div class="status-card custom-card card-hover card pink-card" routerLink="/vim/details">
 116                         <i class="fas fa-server"></i>
 117                         <h3>{{ (vimAccountCount)?vimAccountCount:0 }}</h3>
 118                         <h6>{{'VIMACCOUNTS' | translate}}</h6>
 119                         <span class="link-icon">
 120                             <i class="fa fa-link" aria-hidden="true"></i>
 121                         </span>
 122                     </div>
 123                 </div>
 124                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
 125                     <div class="status-card custom-card card-hover card pink-card" routerLink="/sdn/details">
 126                         <i class="fas fa-globe"></i>
 127                         <h3>{{ (sdnControllerCount)?sdnControllerCount:0 }}</h3>
 128                         <h6>{{'SDNCONTROLLER' | translate}}</h6>
 129                         <span class="link-icon">
 130                             <i class="fa fa-link" aria-hidden="true"></i>
 131                         </span>
 132                     </div>
 133                 </div>
 134             </div>
 135         </div>
 136     </div>
 137     <div class="col-xs-3 col-sm-12 col-md-12 col-lg-3 col-xl-3 p-0">
 138         <div class="custom-card">
 139             <div class="card-header p-0 custom-card-header">
 140                 <a routerLink="/projects">
 141                     {{'ALL' | translate}} {{'PAGE.DASHBOARD.PROJECTS' | translate}}
 142                     <span
 143                         class="badge badge-primary badge-pill bg-white text-body font-weight-bold">{{allProjectList.length}}</span>
 144                 </a>
 145             </div>
 146             <div class="card-body list-overflow project-list">
 147                 <ul class="list-group">
 148                     <li class="list-group-item text-left d-flex justify-content-between align-items-center selectProject"
 149                         *ngFor='let list of allProjectList'>
 150                         {{list.projectName}}
 151                         <span class="badge badge-pill" *ngFor='let listcheck of projectList' placement="top"
 152                             container="body"
 153                             ngbTooltip="{{ (list.projectName === (selectedProject | async) ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
 154                             <i *ngIf="list.projectName === (selectedProject | async) && listcheck.project === list.project"
 155                                 [ngClass]="list.projectName === (selectedProject | async) ? 'activeProjectLink' : ''"
 156                                 class="fas fa-check-circle text-success"></i>
 157                             <i *ngIf="list.projectName !== (selectedProject | async) && listcheck.project === list.project"
 158                                 (click)="this.projectService.switchProjectModal(list)"
 159                                 class="fas fa-exchange-alt text-danger selectProjectLink"></i>
 160                         </span>
 161                     </li>
 162                 </ul>
 163             </div>
 164             <app-loader [waitingMessage]="message" *ngIf="isProjectsLoadingResults"></app-loader>
 165         </div>
 166     </div>
 167 </div>