blob: 9689e0338f340ad33cabaa5430610d13e82f16c6 [file] [log] [blame]
kumaran.m3b4814a2020-05-01 19:48:54 +05301<!--
2Copyright 2020 TATA ELXSI
3
4Licensed under the Apache License, Version 2.0 (the 'License');
5you may not use this file except in compliance with the License.
6You may obtain a copy of the License at
7
8 http://www.apache.org/licenses/LICENSE-2.0
9
10Unless required by applicable law or agreed to in writing, software
11distributed under the License is distributed on an "AS IS" BASIS,
12WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13See the License for the specific language governing permissions and
14limitations under the License.
15
16Author: 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>
SANDHYA.JS4a7a5422021-05-15 15:35:22 +0530136 <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"
SANDHYA.JS0e9c0a42022-04-04 18:44:53 +0530153 bindValue="name" id="vimList" [(ngModel)]="vimListData"></ng-select>
SANDHYA.JS4a7a5422021-05-15 15:35:22 +0530154 </div>
155 </div>
156 </div>
157 </div>
SANDHYA.JS0e9c0a42022-04-04 18:44:53 +0530158 <app-resources-overview *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined && vimListData !== null"
SANDHYA.JS4a7a5422021-05-15 15:35:22 +0530159 [resourcesData]="selectedVIMDetails"></app-resources-overview>
160 </div>
161 </div>
162 </div>
kumaran.m3b4814a2020-05-01 19:48:54 +0530163 </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>