| <!-- |
| 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"> |
| <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"> |
| <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"> |
| <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 class="row mb-2"> |
| <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| <div class="custom-card card mt-2 text-primary pb-3"> |
| <div class="text-center header-style pt-2">{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</div> |
| <div class="row p-2"> |
| <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| <div class="form-row"> |
| <div class="form-group col-md-6"> |
| <label for="vimType">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label> |
| <ng-select (change)="getSelectedVimTypeList($event.value)" class="mt-2 vimdetails" [clearable]="false" |
| placeholder="{{'SELECT' | translate}}" [items]="vimTypes" bindLabel="title" |
| bindValue="value" id="vimType"></ng-select> |
| </div> |
| <div class="form-group col-md-6 me-0"> |
| <label for="vimList">{{'PAGE.VIMDETAILS.NAME' | translate}}</label> |
| <ng-select (change)="getSelectedVIMDetails($event)" class="mt-2 vimdetails" [clearable]="false" |
| placeholder="{{'SELECT' | translate}}" [items]="vimList" bindLabel="name" |
| bindValue="name" id="vimList" [(ngModel)]="vimListData"></ng-select> |
| </div> |
| </div> |
| </div> |
| </div> |
| <app-resources-overview *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined && vimListData !== null" |
| [resourcesData]="selectedVIMDetails"></app-resources-overview> |
| </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> |