manager.component.html 6.39 KiB
<h4 class="header">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4>
<div style="display: flex; align-items: center; margin-top:20px">
<div style=" display:flex; align-items: center;">
<div style="margin-right:20px;">
<button class="btn btn-primary" (click)="modal.show()">New Cluster</button>
</div>
<span class="p-input-icon-right">
<i class="pi pi-search" style="font-size: 13px; top: 16px; margin-right: 5px;"></i>
<input pInputText class="form-control" name="search" id="search"
placeholder="Search" type="text" [(ngModel)]="searchValue" (ngModelChange)="filterClusters()">
</span>
</div>
</div>
<div class="background-section">
<p-table
[value]="filteredClusters"
[paginator]="true"
[rows]="maxItemsOnPage"
[rowsPerPageOptions]="[15, 20, 25, 30, 50]"
[responsiveLayout]="'scroll'">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id" id="id"> {{ 'CLUSTERS.ID' | translate }}
<p-sortIcon field="id"></p-sortIcon>
</th>
<th pSortableColumn="name" id="name"> {{ 'CLUSTERS.NAME' | translate }}
<p-sortIcon field="name"></p-sortIcon>
</th>
<th pSortableColumn="codename" id="codename"> {{ 'CLUSTERS.CODENAME' | translate }}
<p-sortIcon field="codename"></p-sortIcon>
</th>
<th pSortableColumn="state" id="state"> {{ 'CLUSTERS.STATE' | translate }}
<p-sortIcon field="state"></p-sortIcon>
</th>
<th pSortableColumn="creationDate" id="creationDate"> {{ 'CLUSTERS.CREATION_DATE' | translate }}
<p-sortIcon field="creationDate"></p-sortIcon>
</th>
<th pSortableColumn="modificationDate" id="modificationDate"> {{ 'CLUSTERS.MODIFICATION_DATE' | translate }}
<p-sortIcon field="modificationDate"></p-sortIcon>
</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-cluster>
<tr>
<td [routerLink]="[cluster.id]">{{cluster.id}}</td>
<td [routerLink]="[cluster.id]">{{cluster.name}}</td>
<td [routerLink]="[cluster.id]">{{cluster.codename}}</td>
<td [routerLink]="[cluster.id]">{{('CLUSTERS.'+cluster.state.toString().toUpperCase() ) | translate}}</td>
<td [routerLink]="[cluster.id]">{{cluster.creationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
<td [routerLink]="[cluster.id]">{{cluster.modificationDate | date: 'dd-MM-yyyy HH:mm'}}</td>
<td class="text-right">
<span class="dropdown">
<a style="display: inline-block" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button">
<em class="pi pi-cog" style="font-size: 1.8rem; color: var(--l-text-color)"></em>
</a>
<ul class="dropdown-menu pull-right-drop" >
<li><a [routerLink]="[ cluster.id]" class="">
{{ 'CLUSTERS.DETAILS' | translate }}</a>
</li>
<li><a (click)="deleteCluster(cluster)" class="">
{{ 'CLUSTERS.REMOVE' | translate }}</a>
</li>
</ul>
</span>
</td>
</tr>
</ng-template>
</p-table>
</div>
<nmaas-modal >
<div class="nmaas-modal-header">{{'CLUSTERS.CONNECT_CLUSTER' | translate}}</div>
<div class="nmaas-modal-body">
<div class="flex flex-column">
<div class="mt-4">
<label for="name">{{'CLUSTERS.NAME' | translate}}</label>
<input id="name" type="text" class="form-control" [(ngModel)]="addedCluster.name" [ngModelOptions]="{standalone: true}">
</div>
<div class="mt-4">
<label for="desc">{{'CLUSTERS.DESCRIPTION' | translate}}</label>
<input id="desc" type="text" class="form-control" [(ngModel)]="addedCluster.description" [ngModelOptions]="{standalone: true}">
</div>
<div class="mt-4">
<label for="contactEmail">{{'CLUSTERS.CONTACT_MAIL' | translate}}</label>
<input id="contactEmail" type="text" class="form-control" [(ngModel)]="addedCluster.contactEmail" [ngModelOptions]="{standalone: true}">
</div>
<div class="mt-4">
<div>
<label for="assignDomain">Assign to domain? </label>
<input type="checkbox" [(ngModel)]="assignedDomain" (change)="onDomainChange($event)" id="assignDomain" />
</div>
<div class="mt-4" *ngIf="assignedDomain">
<label for="name">{{'CLUSTERS.DOMAIN' | translate}}</label>
<select id="domain" #domainSelect class="form-control" (change)="onDomainSelection(domainSelect.value)" plaaceholder="testtesttest" >
<option *ngFor="let domain of domains" [value]="domain.name"
>{{domain.name}}
</option>
</select>
</div>
</div>
<div class="card flex justify-content-center mt-4" >
<p-fileUpload name="json" (onUpload)="saveFile($event)" customUpload="true" [draggable]="true" pTooltip="Upload file is required before save"
(uploadHandler)="saveFile($event)" [multiple]="false" accept=".yaml" maxFileSize="1000000">
</p-fileUpload>
</div>
</div>
</div>
<div class="nmaas-modal-footer">
<button type="button" class="btn btn-secondary"
(click)="this.modal.hide()">{{'UNDEPLOY_MODAL.CANCEL_BUTTON' | translate}}</button>
<button type="button" class="btn btn-primary" [disabled]="updatedFile === null || addedCluster?.name === null || addedCluster?.description === null"(click)="closeModalAndSaveCluster()"
pTooltip="Upload file is required before save" showDelay="2000" >{{'CLUSTERS.SAVE' | translate}}</button>
</div>
</nmaas-modal>