--- /dev/null
+<!--
+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: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="row dashboard">
+ <div class="col-xs-9 col-sm-12 col-md-12 col-lg-9 col-xl-9 p-0">
+ <div class="row instances">
+ <div class="col-xs-8 col-sm-8 col-md-12 col-lg-8 col-xl-8">
+ <div class="custom-card card mb-3 text-center graph-section">
+ <div class="card-title">
+ <h6 class="font-weight-bold" *ngIf="nsRunningInstance.length">
+ {{'PAGE.DASHBOARD.UPTIME' | translate}} {{'PAGE.DASHBOARD.RUNNINGINSTANCES' | translate}}
+ </h6>
+ <h6 *ngIf="!nsRunningInstance.length">
+ <span> {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</span>
+ </h6>
+ <div [ngClass]="{'show-canvas':nsRunningInstance.length}" class="instances-canvas">
+ <canvas id="canvas"></canvas>
+ </div>
+ </div>
+ </div>
+ <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
+ </div>
+ <div class="col-xs-4 col-sm-4 col-md-12 col-lg-4 col-xl-4">
+ <div class="custom-card card card mb-3">
+ <div class="card-header custom-card-header">
+ {{'PAGE.DASHBOARD.FAILEDINSTANCES' | translate}}
+ </div>
+ <div class="card-body list-overflow failed-instances">
+ <ul class="list-group">
+ <li class="list-group-item text-left" *ngIf="!nsFailedInstances.length">
+ {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</li>
+ <li class="list-group-item text-left d-flex justify-content-between align-items-center"
+ *ngFor="let nsFailedInstance of nsFailedInstances">
+ <span class="text-truncate">{{nsFailedInstance.name}}</span>
+ <ng-template #popTitle>
+ <strong>{{nsFailedInstance.name}}</strong>
+ <button class="button-xs close" type="button" (click)="p.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+ </ng-template>
+ <span class="badge badge-pill">
+ <i placement="left" container="body"
+ ngbPopover="{{'DETAILEDSTATUS' | translate}}: {{nsFailedInstance['detailed-status']}}"
+ triggers="manual" #p="ngbPopover" (click)="p.open()" [autoClose]="'outside'"
+ [popoverTitle]="popTitle"
+ class="fas fa-exclamation-circle text-danger float-left"></i></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
+ </div>
+ </div>
+ <div class="row module-counts">
+ <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card aqua-card" routerLink="/packages/ns">
+ <i class="fas fa-box-open"></i>
+ <h3>{{ (nsdPackageCount)?nsdPackageCount:0 }}</h3>
+ <h6>{{'NSPACKAGES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card aqua-card" routerLink="/instances/ns">
+ <i class="fas fa-sitemap"></i>
+ <h3>{{ (nsInstanceCount)?nsInstanceCount:0 }}</h3>
+ <h6>{{'NSINSTANCES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card purple-card" routerLink="/packages/vnf">
+ <i class="fas fa-box-open"></i>
+ <h3>{{ (vnfdPackageCount)?vnfdPackageCount:0 }}</h3>
+ <h6>{{'VNFPACKAGES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card purple-card" routerLink="/instances/vnf">
+ <i class="fas fa-hdd"></i>
+ <h3>{{ (vnfInstanceCount)?vnfInstanceCount:0 }}</h3>
+ <h6>{{'VNFINSTANCES' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card pink-card" routerLink="/vim/details">
+ <i class="fas fa-server"></i>
+ <h3>{{ (vimAccountCount)?vimAccountCount:0 }}</h3>
+ <h6>{{'VIMACCOUNTS' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+ <div class="status-card custom-card card-hover card pink-card" routerLink="/sdn/details">
+ <i class="fas fa-globe"></i>
+ <h3>{{ (sdnControllerCount)?sdnControllerCount:0 }}</h3>
+ <h6>{{'SDNCONTROLLER' | translate}}</h6>
+ <span class="link-icon">
+ <i class="fa fa-link" aria-hidden="true"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-3 col-sm-12 col-md-12 col-lg-3 col-xl-3 p-0">
+ <div class="custom-card">
+ <div class="card-header p-0 custom-card-header">
+ <a routerLink="/projects">
+ {{'ALL' | translate}} {{'PAGE.DASHBOARD.PROJECTS' | translate}}
+ <span
+ class="badge badge-primary badge-pill bg-white text-body font-weight-bold">{{allProjectList.length}}</span>
+ </a>
+ </div>
+ <div class="card-body list-overflow project-list">
+ <ul class="list-group">
+ <li class="list-group-item text-left d-flex justify-content-between align-items-center selectProject"
+ *ngFor='let list of allProjectList'>
+ {{list.projectName}}
+ <span class="badge badge-pill" *ngFor='let listcheck of projectList' placement="top"
+ container="body"
+ ngbTooltip="{{ (list.projectName === (selectedProject | async) ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
+ <i *ngIf="list.projectName === (selectedProject | async) && listcheck.project === list.project"
+ [ngClass]="list.projectName === (selectedProject | async) ? 'activeProjectLink' : ''"
+ class="fas fa-check-circle text-success"></i>
+ <i *ngIf="list.projectName !== (selectedProject | async) && listcheck.project === list.project"
+ (click)="this.projectService.switchProjectModal(list)"
+ class="fas fa-exchange-alt text-danger selectProjectLink"></i>
+ </span>
+ </li>
+ </ul>
+ </div>
+ <app-loader [waitingMessage]="message" *ngIf="isProjectsLoadingResults"></app-loader>
+ </div>
+ </div>
+</div>
\ No newline at end of file