Merge branch 'portal-update' into remotes/origin/develop

Kostis Trantzasrequested to merge
portal-update into develop

Closes #29 (closed)

Merge request reports

src/app/landing/metrics/doughnutchart/doughnutchart.component.html

0 → 100644
+41 −0
Changes for src/app/landing/metrics/doughnutchart/doughnutchart.component.html: 41 added lines, 0 removed lines.
Original line number Diff line number Diff line 
<div class="chart-container">

    

    <div class="service-chart">

        <div *ngIf="isLoading" class="pie-chart">

            <skeleton [height]="'100%'" [width]="'100%'" [borderRadius]="'50%'"></skeleton>

        </div>

        <div *ngIf="totalChartData==0 && !isLoading" class="no-data-found">

            {{noDataMessage}}

        </div>

        <canvas *ngIf="totalChartData!=0 && !isLoading" baseChart [data]="chartData" [type]="'doughnut'"

        [options]="chartOptions" [plugins]="plugins">

        </canvas>  

    </div>

    <div class="chart-info">

        <div *ngIf="isLoading" style="height: 20%; width: 65%; margin-bottom: 0.5rem">

            <skeleton [height]="'100%'" [width]="'100%'"></skeleton>

        </div>

        <div class="chart-title" *ngIf="!isLoading"> 

            {{chartTitle}}

        </div> 

        <div *ngIf="isLoading" style="height: 50%; width: 50%">

            <skeleton [height]="'100%'" [width]="'100%'"></skeleton>

        </div>

        <div class="chart-legend" *ngIf="!isLoading">

            <ul style="padding: 0; margin-bottom: 0;">

                <li style="display: flex; align-items: center; padding-right: 20px" *ngFor="let label of chartData.labels; index as i">

                    <span [ngStyle]="{

                        'display': 'inline-block',

                        'width': '10px',

                        'height': '10px',

                        'margin-right': '7px',

                        'background-color': chartData.datasets[0].backgroundColor[i]

                      }"></span>

                    {{label}}

                </li>

            </ul>

        </div>

    </div>

    

    

</div>
 
 No newline at end of file

src/app/landing/metrics/doughnutchart/doughnutchart.component.scss

0 → 100644
+61 −0
Changes for src/app/landing/metrics/doughnutchart/doughnutchart.component.scss: 61 added lines, 0 removed lines.
Original line number Diff line number Diff line 
.chart-container {

    display: flex;

    width: 100%;

    height: 100%;

    align-items: center;

}



.service-chart {

    display: flex;

    justify-content: center;

    height: 100%;

    width: 50%;

    padding: .5rem;

    font-size: 0.9rem;



    // padding-right: 20px;

}



.pie-chart {

    // height: calc(20vh - 10px); 

    // width: calc(20vh - 10px); 

    // max-height: 170px; 

    // max-width: 170px; 

    min-height: 150px; 

    min-width: 150px;

}



.chart-info {

    width: 50%;

    display: flex;

    height: 100%;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: .5rem;

}



.chart-title {

    display: flex;

    //font-size: clamp(1rem, min(2vw, 2vh), 3rem);

    //font-size: 2vmin;

    //font-size: 1rem;

    font-size: 0.8rem;

    font-weight: 700;

    margin-bottom: 0.25rem;

}



.chart-legend {

    display: flex;

    //font-size: clamp(0.35rem, 1.5vh, 2rem);

    //font-size: 1.5vmin;

    //font-size: 0.5rem;

    font-size: 0.8rem;

    align-items: center;

}



.no-data-found {

    display: flex;

    align-items: center;

    text-align: center;

}
 
 No newline at end of file

src/app/landing/metrics/doughnutchart/doughnutchart.component.ts

0 → 100644
+29 −0
Changes for src/app/landing/metrics/doughnutchart/doughnutchart.component.ts: 29 added lines, 0 removed lines.
Original line number Diff line number Diff line 
import { Component, Input, OnInit } from '@angular/core';

import { ChartOptions, ChartType } from 'chart.js';



@Component({

    selector: 'app-doughnutchart',

    templateUrl: './doughnutchart.component.html',

    styleUrls: ['./doughnutchart.component.scss']

})

export class DoughnutchartComponent implements OnInit {



    @Input() chartData: any;

    @Input() chartLabels: string[] = [];

    @Input() chartOptions: ChartOptions = {};

    @Input() chartTitle: string;

    @Input() plugins;

    @Input() isLoading: boolean;

    @Input() totalChartData: number;

    @Input() noDataMessage: string;



    chartType: ChartType = 'doughnut';





    constructor() {}



    ngOnInit(): void {



    }



}
 
 No newline at end of file

src/app/landing/metrics/statuscard/statuscard.component.html

0 → 100644
+62 −0
Changes for src/app/landing/metrics/statuscard/statuscard.component.html: 62 added lines, 0 removed lines.
Original line number Diff line number Diff line 
<div class="card">

    <div class="card-body">

        <div class="card-link">

            <div *ngIf="redirectsToPortal">

                <a *ngIf="portalLink==='nfvportal/';else nonExternalRedirects"

                    [href]="portalLink" [attr.data-cy]="dataCY" class="portal-button">

                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">

                        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>

                        <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>

                    </svg>

                </a>

                <ng-template #nonExternalRedirects>

                    <a

                    routerLink="/{{portalLink}}" [attr.data-cy]="dataCY" class="portal-button">

                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">

                        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>

                        <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>

                    </svg>

                </a>

                </ng-template>

            </div>

        </div>

        <div class="card-main">

            <div *ngIf="isLoading" style="width: 50%; height: 50%">

                <skeleton [height]="'100%'" [width]="'100%'"></skeleton>

            </div>

            <div class="card-stats" *ngIf="!isLoading">

                <div class="status-icon">

                    <svg *ngIf="statusIcon==='users'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">

                        <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>

                    </svg>

                    <svg *ngIf="statusIcon==='nsd'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-database" viewBox="2 0 16 16">

                        <path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/>

                    </svg>

                    <svg *ngIf="statusIcon==='vnf'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-hdd-network" viewBox="0 0 16 15">

                        <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>

                        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5h5.5a.5.5 0 0 1 0 1H10A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5H.5a.5.5 0 0 1 0-1H6A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1m6 7.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5"/>

                    </svg>

                    <svg *ngIf="statusIcon==='resources'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-server" viewBox="1 0 16 16">

                        <path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4z"/>

                        <path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.5 6.5 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8s-3.809-.317-5.208-.876a6.5 6.5 0 0 1-1.458-.79z"/>

                        <path d="M14.667 11.668a6.5 6.5 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876-1.966 0-3.809-.316-5.208-.876a6.5 6.5 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667z"/>

                    </svg>

                    <svg *ngIf="statusIcon==='services'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-gear-wide-connected" viewBox="0 0 16 16">

                        <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5m0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78zM5.048 3.967l-.087.065zm-.431.355A4.98 4.98 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8zm.344 7.646.087.065z"/>

                    </svg>

                    <svg *ngIf="statusIcon==='orders'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16">

                        <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"/>

                        <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8m0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>

                    </svg>

                </div>

                <h6 class="card-title" style="font-weight: 700" >{{statusStats}}</h6>

                

            </div>

            <div *ngIf="isLoading" style="height: 25%; width: 100%">

                <skeleton [height]="'100%'" [width]="'100%'"></skeleton>

            </div>

            <p *ngIf="!isLoading" class="card-text">{{statusTitle}}</p>

        </div>

        

    </div>

</div>
 
 No newline at end of file

src/app/landing/metrics/statuscard/statuscard.component.scss

0 → 100644
+85 −0
Changes for src/app/landing/metrics/statuscard/statuscard.component.scss: 85 added lines, 0 removed lines.
Original line number Diff line number Diff line 
.card {

    background-color: #ffffff;

    //border-radius: 8px;

    color: black;

    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);

    height: 20vh;

    max-height: 180px;

    min-height: 110px;

}



.card-body {

    padding: 1rem;

}



.card-link {

    display: flex;

    justify-content: flex-end;

    min-height: 15%;

}



.card-main {

    display: flex;

    flex-direction: column;

    min-height: 75%;

    justify-content: space-around;

    // padding-left: 5px;

}



.card-stats {

    display: flex;

    align-items: center;

}



.card-title {

    margin-bottom: 0;

    margin-left: 10%;

}



.card-title {

    //font-size: clamp(2rem, 4.8vh, 5rem);

    //font-size: 4.8vmin;

    //font-size: 2rem;

    font-size: 26px;

}



.card-text {

    //font-size: clamp(1rem, 1.8vh, 2rem);

    //font-size: 1.8vmin;

    //font-size: 1rem;

    font-size: 0.9rem;

}



.portal-button {

    color: #0078AE;

}



.portal-button:hover {

    color: #a7b11d;

    transition: ease-in-out;

    transition-duration: 200ms;

    transition-delay: 100ms;

}



// @media (max-width: 1200px) {

//     .status-icon > svg {

//         width: 2em;

//         height: 2em;

//     }

// }



// @media (max-height: 600px) {

//     .status-icon > svg {

//         width: 2em;

//         height: 2em;

//     }

// }



// @media (orientation: portrait) {

//     .card-title {

//         font-size: 2vh;

//     }

//     .card-text {

//         font-size: 1vh;

//     }

// }
 
 No newline at end of file