summaryrefslogtreecommitdiffstats
path: root/public/src/app/home/home.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/src/app/home/home.component.html')
-rw-r--r--public/src/app/home/home.component.html58
1 files changed, 38 insertions, 20 deletions
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 99ab321..3c23385 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -5,15 +5,18 @@
<div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div>
<div style="display: flex;">
- <button mat-icon-button [disabled]="!checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (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:20"></span>
+ align-items: center;"
+ [innerHTML]="'download' | feather:20"></span>
</button>
- <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [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>
@@ -29,14 +32,14 @@
</div>
</div>
- <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator"
- [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12" [rowHeight]="40" (selected)="onTableSelectItem($event)"
- [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)">
+ <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="store.monitoringComponents"
+ [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12"
+ [rowHeight]="45" (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" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
- [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}">
+ <div>
<span> {{value}} </span>
</div>
</ng-template>
@@ -54,21 +57,34 @@
<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>
+ <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="2">
+ <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="checkCanCreate(); 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>
+ <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px; display: flex; justify-content: flex-start; align-items: center;">
+
+ <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
+ <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
+ </button>
+
+ <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+ [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
+ tooltipPosition="top">
+ <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+ [innerHTML]="'edit-3' | feather:18"></span>
</button>
- <ng-template #elseBtnBlock>
+ <div *ngIf="checkCanCreate();">
+ <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
+ tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
+ <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
+ </button>
+ </div>
- <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>
+ <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
+ pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
+ <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+ [innerHTML]="'trash-2' | feather:18"></span>
+ </button>
</div>
@@ -99,7 +115,9 @@
<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: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
+ <span style="margin-top: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">
+ <p data-tests-id="btn-span-create-mc">Add First MC</p>
+ </span>
</div>
</div>
</ng-template>