Feature-5950: Management of quotas in VIM Account

[osm/NG-UI.git] / src / app / vim-accounts / Resources-Overview / ResourcesOverviewComponent.html

diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
new file mode 100644 (file)
index 0000000..39990b5
--- /dev/null
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
@@ -0,0 +1,60 @@
+<!--
+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: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+-->
+<div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+        <div class="row d-flex flex-row justify-content-between px-3 py-2">
+            <div class="d-flex align-items-center header-style">{{resourcesData.name}}</div>
+            <span class="button">
+                <label class="switch ml-1">
+                    <input type="checkbox" (change)="changeChartType($event.target.checked)">
+                    <div class="slider round">
+                        <span class="on">{{ 'PAGE.VIMDETAILS.DOUGHNUT' | translate }}</span>
+                        <span class="off">{{ 'PAGE.VIMDETAILS.PIE' | translate }}</span>
+                    </div>
+                </label>
+            </span>
+        </div>
+        <ng-container *ngFor="let showData of chartData">
+            <div class="header-style ml-3 mt-2">{{showData.heading}}</div>
+            <div class="row mt-2">
+                <div class="col-xs-{{12/showData.length}} col-sm-{{12/showData.length}} col-md-{{12/showData.length}} col-lg-{{12/showData.length}} col-xl-{{12/showData.length}}"
+                    *ngFor="let list of showData.data;let i = index;">
+                    <div class="chartData-card card text-center text-primary">
+                        <canvas class="my-2"
+                            baseChart
+                            [data]="list.data"
+                            [labels]="chartLabels"
+                            [chartType]="chartType"
+                            [options]="chartOptions"
+                            [legend]="chartLegend"
+                            [colors]="list.colorValues">
+                        </canvas>
+                        <div class="card-body">
+                            <h5 class="card-title"><strong>{{list.title}}</strong></h5>
+                            <p class="card-text">
+                                {{ (list.title === 'Floating IPs' ? 'PAGE.VIMDETAILS.ALLOCATED' : 'PAGE.VIMDETAILS.USED') | translate }}
+                                {{list.values.used}}{{ list.title === 'RAM' || list.title === 'Volume Storage' ? list.values.used > 0 ? 'GB' : 'Bytes' : '' }}
+                                of {{list.values.total}}{{ list.title === 'RAM' || list.title === 'Volume Storage' ? 'GB' : '' }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+</div>
\ No newline at end of file