<!--
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 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">
                    <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)" [clearable]="false"
                                        placeholder="{{'SELECT' | translate}}" [items]="vimTypes" bindLabel="title"
                                        bindValue="value" id="vimType"></ng-select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="vimList">{{'PAGE.VIMDETAILS.NAME' | translate}}</label>
                                    <ng-select (change)="getSelectedVIMDetails($event)" [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>