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 class="row mb-2">
 137             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
 138                 <div class="custom-card card mt-2 text-primary">
 139                     <div class="text-center header-style pt-2">{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</div>
 140                     <div class="row p-2">
 141                         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
 142                             <div class="form-row">
 143                                 <div class="form-group col-md-6">
 144                                     <label for="vimType">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label>
 145                                     <ng-select (change)="getSelectedVimTypeList($event.value)" [clearable]="false"
 146                                         placeholder="{{'SELECT' | translate}}" [items]="vimTypes" bindLabel="title"
 147                                         bindValue="value" id="vimType"></ng-select>
 148                                 </div>
 149                                 <div class="form-group col-md-6">
 150                                     <label for="vimList">{{'PAGE.VIMDETAILS.NAME' | translate}}</label>
 151                                     <ng-select (change)="getSelectedVIMDetails($event)" [clearable]="false"
 152                                         placeholder="{{'SELECT' | translate}}" [items]="vimList" bindLabel="name"
 153                                         bindValue="name" id="vimList"></ng-select>
 154                                 </div>
 155                             </div>
 156                         </div>
 157                     </div>
 158                     <app-resources-overview *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined"
 159                         [resourcesData]="selectedVIMDetails"></app-resources-overview>
 160                 </div>
 161             </div>
 162         </div>
 163     </div>
 164     <div class="col-xs-3 col-sm-12 col-md-12 col-lg-3 col-xl-3 p-0">
 165         <div class="custom-card">
 166             <div class="card-header p-0 custom-card-header">
 167                 <a routerLink="/projects">
 168                     {{'ALL' | translate}} {{'PAGE.DASHBOARD.PROJECTS' | translate}}
 169                     <span
 170                         class="badge badge-primary badge-pill bg-white text-body font-weight-bold">{{allProjectList.length}}</span>
 171                 </a>
 172             </div>
 173             <div class="card-body list-overflow project-list">
 174                 <ul class="list-group">
 175                     <li class="list-group-item text-left d-flex justify-content-between align-items-center selectProject"
 176                         *ngFor='let list of allProjectList'>
 177                         {{list.projectName}}
 178                         <span class="badge badge-pill" *ngFor='let listcheck of projectList' placement="top"
 179                             container="body"
 180                             ngbTooltip="{{ (list.projectName === (selectedProject | async) ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
 181                             <i *ngIf="list.projectName === (selectedProject | async) && listcheck.project === list.project"
 182                                 [ngClass]="list.projectName === (selectedProject | async) ? 'activeProjectLink' : ''"
 183                                 class="fas fa-check-circle text-success"></i>
 184                             <i *ngIf="list.projectName !== (selectedProject | async) && listcheck.project === list.project"
 185                                 (click)="this.projectService.switchProjectModal(list)"
 186                                 class="fas fa-exchange-alt text-danger selectProjectLink"></i>
 187                         </span>
 188                     </li>
 189                 </ul>
 190             </div>
 191             <app-loader [waitingMessage]="message" *ngIf="isProjectsLoadingResults"></app-loader>
 192         </div>
 193     </div>
 194 </div>