diff options
Diffstat (limited to 'public/src/app/home/home.component.html')
| -rw-r--r-- | public/src/app/home/home.component.html | 132 |
1 files changed, 68 insertions, 64 deletions
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html index 90e82d3..8cea741 100644 --- a/public/src/app/home/home.component.html +++ b/public/src/app/home/home.component.html @@ -1,18 +1,19 @@ -<div class="container"> +<div class="home-container"> <div style="display: flex; + padding-bottom:7px; justify-content: space-between;"> - <div style="font-size: 1.7em; display: flex; align-items: center;">Monitoring</div> + <div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div> <div style="display: flex;"> - <button mat-icon-button [disabled]="checkCanCreate()" (click)="importScreen()"> + <button mat-icon-button [disabled]="checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (click)="importScreen()"> <span style="width: 100%; height: 100%; display: flex; justify-content: center; - align-items: center;" [innerHTML]="'download' | feather:22"></span> + align-items: center;" [innerHTML]="'download' | feather:20"></span> </button> - <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" [disabled]="checkCanCreate()"> + <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [disabled]="checkCanCreate()"> Create New MC </button> </div> @@ -21,62 +22,66 @@ <div *ngIf="showTable===true; then thenBlock else elseBlock"></div> <ng-template #thenBlock> - <!-- Table --> - <div class="table-wrapper"> - <div *ngIf="unavailableMonitoringComponents.length > 0" data-tests-id="unavailableArea" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin: 1em 0;"> - <div *ngFor="let item of unavailableMonitoringComponents"> - {{item.uuid}} - </div> + + <div *ngIf="unavailableMonitoringComponents.length > 0" data-tests-id="unavailableArea" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin: 1em 0;"> + <div *ngFor="let item of unavailableMonitoringComponents"> + {{item.uuid}} </div> - <table class="mcTable"> - <thead> - <tr data-tests-id="monitoringComponentTableHeaders"> - <th>Monitoring Configuration</th> - <th>VNFI Name</th> - <th style="width:90px;">Version</th> - <th style="width:140px;">Status</th> - <th style="width:140px;">Last Updated by</th> - <th style="width:96px;">Action</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of monitoringComponents; let i = index" on-mouseleave="hoveredIndex=null" (click)="onSelect(i)" [class.active]="i == selectedLine" - data-tests-id="monitoringComponentTableItems" on-mouseover="hoveredIndex=i"> - <td color="blue"> - <div [hidden]="checkHoverCondition(item)" data-tests-id="tableItemsMonitoringConfiguration" class="table-Monitoring-Component" (click)="editItem(item)"> - {{item.name}} - </div> - </td> - <td> - <span pTooltip="{{item.vfiName}}" tooltipPosition="bottom" style="padding:5px;">{{item.vfiName}}</span> - </td> - <td style="width:90px;">{{item.version}}</td> - <td style="width:140px;">{{item.status}}</td> - <td style="width:140px;">{{item.lastUpdaterUserId}}</td> - <td style="width:80px;"> - <div *ngIf="i==hoveredIndex" [hidden]="checkHoverCondition(item)"> - <button mat-icon-button data-tests-id="tableItemsButtonDelete" (click)="deleteItem(item)" style="width:30px; height: 30px;"> - <span style="width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center;" [innerHTML]="'trash-2' | feather:18"></span> - </button> - </div> - <div *ngIf="i==hoveredIndex" [hidden]="!checkHoverCondition(item)"> - <button mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;"> - <span style="width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center;" [innerHTML]="'info' | feather:18"></span> - </button> - </div> - </td> - </tr> - </tbody> - </table> </div> + + <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" + [headerHeight]="40" [footerHeight]="40" [limit]="10" [rowHeight]="40"(selected)="onTableSelectItem($event)" + [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)"> + + <ngx-datatable-column name="Monitoring Configuration" prop="name" [flexGrow]="3"> + <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> + + <div data-tests-id="tableItemsMonitoringConfiguration" [hidden]="checkTableItemHoverCondition(row)" (click)="editTableItem(row)" + class="ngx-datatable-monitoring-name"> + <span> {{value}} </span> + </div> + <div data-tests-id="tableItemsMonitoringConfigurationNotOwner" [hidden]="!checkTableItemHoverCondition(row)"> + <span>{{value}} </span> + </div> + </ng-template> + + </ngx-datatable-column> + <ngx-datatable-column name="VNFI Name" prop="vfiName" [flexGrow]="3"> + <ng-template let-value="value" ngx-datatable-cell-template> + + <div pTooltip="{{value}}" tooltipPosition="bottom">{{value}}</div> + + </ng-template> + + + </ngx-datatable-column> + <ngx-datatable-column name="Version" prop="version" [flexGrow]="1"></ngx-datatable-column> + <ngx-datatable-column name="Status" prop="status" [flexGrow]="2"></ngx-datatable-column> + <ngx-datatable-column name="Last Updated by" prop="lastUpdaterUserId" [flexGrow]="2"></ngx-datatable-column> + <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="1"> + <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template > + + <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px;" > + <button data-tests-id="tableItemsButtonDelete" *ngIf="!checkTableItemHoverCondition(row); else elseBtnBlock" mat-icon-button + data-tests-id="tableItemsButtonDelete" (click)="deleteTableItem(row, rowIndex)" style="width:30px; height: 30px;"> + <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'trash-2' | feather:18"></span> + </button> + + <ng-template #elseBtnBlock> + + <button data-tests-id="tableItemsButtonInfo" mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;"> + <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'info' | feather:18"></span> + </button> + </ng-template> + + </div> + + </ng-template> + </ngx-datatable-column> + + </ngx-datatable> + + </ng-template> <ng-template #elseBlock> @@ -85,22 +90,21 @@ justify-content: center; align-items: center; flex:1;"> - <div style="font-size: 1.5em;"> + <div style="font-size: 18px;"> Monitoring Configuration does not Exist </div> - <div style="padding: 0.5em; padding-top: 1em;" data-tests-id="new-monitoring-title"> + <div style="padding: 0.5em; padding-top: 1em; font-size: 13px;" data-tests-id="new-monitoring-title"> A Monitoring Configuration (MC) was not yet created </div> - <div> + <div style="font-size: 13px;"> Please create a new MC to monitor the service </div> <div class="wrapper-btn-add-mc"> <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="checkCanCreate()"> <span [innerHTML]="'plus' | feather:24"></span> </button> - <span data-tests-id="btn-span-create-mc" style="margin-top: 1rem; font-size: 1.2em; font-weight: 400;" [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span> + <span data-tests-id="btn-span-create-mc" style="margin-top: 10px; font-size: 14px; " [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span> </div> </div> </ng-template> </div> - |