add-cluster.component.html 25.76 KiB
<h3 xmlns="http://www.w3.org/1999/html">
{{ 'CLUSTERS.WIZARD.ADD' | translate }}
</h3>
<p-steps [model]="steps" [(activeIndex)]="activeStepIndex"></p-steps>
<hr />
<div *ngIf="activeStepIndex === 0">
<div class="panel">
<div class="bs-callout bs-callout-primary">
<h4>{{'CLUSTERS.WIZARD.STEP_1' | translate }}</h4>
{{'CLUSTERS.WIZARD.STEP_1_INFO' | translate }}
</div>
<div>
<div class="mt-4">
<label for="name">{{'CLUSTERS.NAME' | translate}}</label>
<input id="name" type="text" class="form-control" [(ngModel)]="cluster.name"
[ngModelOptions]="{standalone: true}">
</div>
<div class="mt-4">
<label for="name">{{'CLUSTERS.FILE' | translate}}</label>
<textarea style="width:100%; overflow: auto; max-height: 500px;" pInputTextarea [autoResize]="true"
class="form-control" [rows]="50" [(ngModel)]="kubernetesFile" name="content-textarea"></textarea>
</div>
</div>
</div>
<div class="panel">
</div>
<button type="button" class="btn btn-primary pull-right" (click)="uploadKubernetesFile()"
pTooltip="{{'CLUSTERS.WIZARD.TOOLTIP_1' | translate}}" tooltipPosition="bottom"
[showDelay]="50">{{'APPS_WIZARD.NEXT_BUTTON' | translate}}</button>
</div>
<div *ngIf="activeStepIndex === 1">
<div class="panel">
<div class="bs-callout bs-callout-primary">
<h4>{{'CLUSTERS.WIZARD.STEP_2' | translate }}</h4>
{{'CLUSTERS.WIZARD.STEP_2_INFO' | translate }}
</div>
</div>
<div class="panel">
<div class="mt-4">
<label for="desc">{{'CLUSTERS.CODENAME' | translate}}</label>
<input id="desc" type="text" class="form-control" [(ngModel)]="cluster.codename" [readOnly]="true"
[ngModelOptions]="{standalone: true}">
</div>
<div class="mt-4">
<label for="desc">{{'CLUSTERS.DESCRIPTION' | translate}}*</label>
<input id="desc" type="text" class="form-control" [(ngModel)]="cluster.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)]="cluster.contactEmail"
[ngModelOptions]="{standalone: true}">
</div>
<!-- <div *roles="['ROLE_OPERATOR', 'ROLE_SYSTEM_ADMIN']" 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="mt-4">
<div class="mt-4" >
<label for="name">{{'CLUSTERS.DOMAIN' | translate}}*</label>
<select id="domain" #domainSelect class="form-control" (change)="onDomainSelection(domainSelect.value)"
plaaceholder="testtesttest"[required]="true" >
<option *ngFor="let domain of domains" [value]="domain.name">{{domain.name}}
</option>
</select>
</div>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" (click)="nextStep()" [disabled]="!step2valid()"
pTooltip="{{'CLUSTERS.WIZARD.TOOLTIP_2' | translate}}" tooltipPosition="bottom"
[showDelay]="50">{{'APPS_WIZARD.NEXT_BUTTON' | translate}}</button>
</div>
<div *ngIf="activeStepIndex === 2">
<div class="bs-callout bs-callout-primary">
<h4>{{'CLUSTERS.WIZARD.STEP_3' | translate }}</h4>
{{'CLUSTERS.WIZARD.STEP_3_INFO' | translate }}
</div>
<div class="background-section">
<h4 style="font-size:15px; font-weight: bold">{{ 'CLUSTERS.TITLE' | translate }}</h4>
<div class="panel-body">
<form *ngIf="cluster" (submit)="submit()" class="form-horizontal" #clusterForm="ngForm">
<div class="panel-default panel-heading">{{ 'CLUSTERS.INGRESS' | translate }} </div>
<div class="panel-body">
<!-- <div class="form-group">
<label for="ingresscontrollerconfigoption" class="col-sm-2 control-label">{{
'CLUSTERS.CONTROLLER_CONFIG_OPTION' | translate }}</label>
<div class="col-sm-10" *ngIf="controllerConfigOption">
<select class="form-control" id="ingresscontrollerconfigoption"
name="ingresscontrollerconfigoption"
[(ngModel)]="cluster.ingress.controllerConfigOption" [disabled]="" required>
<option *ngFor="let configOption of getKeys(controllerConfigOption)"
[value]="controllerConfigOption.get(configOption)">{{configOption}}</option>
</select>
</div>
</div> -->
<div class="form-group">
<label for="suportedingressclass" class="col-sm-2 control-label">{{
'CLUSTERS.SUPPORTED_INGRESS_CLASS' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="suportedingressclass"
name="suportedingressclass" [(ngModel)]="cluster.ingress.supportedIngressClass"
[disabled]="">
</div>
</div>
<div class="form-group">
<label for="publicingressclass" class="col-sm-2 control-label">{{
'CLUSTERS.PUBLIC_INGRESS_CLASS' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="publicingressclass" name="publicingressclass"
[(ngModel)]="cluster.ingress.publicIngressClass" [disabled]=""> </div>
</div>
<!-- <div class="form-group">
<label for="ingresscontrollerchartname" class="col-sm-2 control-label">{{
'CLUSTERS.CONTROLLER_CHART_NAME' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ingresscontrollerchartname"
name="ingresscontrollerchartname" [(ngModel)]="cluster.ingress.controllerChartName"
[disabled]="">
</div>
</div>
<div class="form-group">
<label for="ingresscontrollerchartarchive" class="col-sm-2 control-label">{{
'CLUSTERS.CONTROLLER_CHART_ARCHIVE' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ingresscontrollerchartarchive"
name="ingresscontrollerchartarchive"
[(ngModel)]="cluster.ingress.controllerChartArchive" [disabled]="">
</div>
</div> -->
<!-- <div class="form-group">
<label for="ingressresourceconfigoption" class="col-sm-2 control-label">{{
'CLUSTERS.RESOURCE_CONFIG_OPTION' | translate }}</label>
<div class="col-sm-10">
<select class="form-control" id="ingressresourceconfigoption"
name="ingressresourceconfigoption" [(ngModel)]="cluster.ingress.resourceConfigOption"
[disabled]="" required>
<option *ngFor="let configOption of getKeys(resourceConfigOption)"
[value]="resourceConfigOption.get(configOption)">{{configOption}}</option>
</select>
</div>
</div> -->
<div class="form-group">
<label for="ingressexternalservicedomain" class="col-sm-2 control-label">{{
'CLUSTERS.EXTERNAL_SERVICE_DOMAIN' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ingressexternalservicedomain"
name="ingressexternalservicedomain" [(ngModel)]="cluster.ingress.externalServiceDomain"
[disabled]="">
</div>
</div>
<div class="form-group">
<label for="ingresspublicservicedomain" class="col-sm-2 control-label">{{
'CLUSTERS.PUBLIC_SERVICE_DOMAIN' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ingresspublicservicedomain"
name="ingresspublicservicedomain" [(ngModel)]="cluster.ingress.publicServiceDomain"
[disabled]="">
</div>
</div>
<div class="form-group">
<label for="ingresstlssupported" class="col-sm-2 control-label">{{ 'CLUSTERS.TLS_SUPPORTED' |
translate }}</label>
<div class="col-sm-10">
<input type="checkbox" id="ingresstlssupported" name="ingresstlssupported"
[(ngModel)]="cluster.ingress.tlsSupported"
[checked]="cluster.ingress.tlsSupported == true" [disabled]="">
</div>
</div>
<div class="form-group" *ngIf="cluster.ingress.tlsSupported">
<label for="ingresscertificateconfigoption" class="col-sm-2 control-label">{{
'CLUSTERS.INGRESS_CERTIFICATE_CONFIG_OPTION' | translate }}</label>
<div class="col-sm-10">
<select class="form-control" id="ingresscertificateconfigoption"
name="ingresscertificateconfigoption"
[(ngModel)]="cluster.ingress.certificateConfigOption" [disabled]="" required>
<option *ngFor="let configOption of getKeys(certificateConfigOption)"
[value]="certificateConfigOption.get(configOption)">{{configOption}}</option>
</select>
</div> </div>
<div class="form-group" *ngIf="cluster.ingress.tlsSupported">
<label for="ingressissuerorwildcardname" class="col-sm-2 control-label">{{
'CLUSTERS.INGRESS_ISSUER_OR_WILDCARD_NAME' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ingressissuerorwildcardname"
name="ingressissuerorwildcardname" [(ngModel)]="cluster.ingress.issuerOrWildcardName"
[disabled]="">
</div>
</div>
<div class="form-group">
<label for="ingressperdomain" class="col-sm-2 control-label">{{ 'CLUSTERS.INGRESS_PER_DOMAIN' |
translate }}</label>
<div class="col-sm-10">
<input type="checkbox" id="ingressperdomain" name="ingressperdomain"
[(ngModel)]="cluster.ingress.ingressPerDomain"
[checked]="cluster.ingress.ingressPerDomain == true" [disabled]="">
</div>
</div>
</div>
<div class="panel-default panel-heading">{{ 'CLUSTERS.DEPLOYMENT' | translate }}</div>
<div class="panel-body">
<div class="form-group">
<label for="deploymentnamespaceconfigoption" class="col-sm-2 control-label">{{
'CLUSTERS.NAMESPACE_CONFIG_OPTION' | translate }}</label>
<div class="col-sm-10" *ngIf="controllerConfigOption">
<select class="form-control" id="deploymentnamespaceconfigoption"
name="deploymentnamespaceconfigoption"
[(ngModel)]="cluster.deployment.namespaceConfigOption" [disabled]="" required>
<option *ngFor="let configOption of getKeys(namespaceConfigOption)"
[value]="namespaceConfigOption.get(configOption)">{{configOption}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="deploymentdefaultnamespace" class="col-sm-2 control-label">{{
'CLUSTERS.DEFAULT_NAMESPACE' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="deploymentdefaultnamespace"
name="deploymentdefaultnamespace" #namespace="ngModel" pattern="[a-z-]*" maxlength="64"
[(ngModel)]="cluster.deployment.defaultNamespace" [disabled]="">
<div *ngIf="namespace.invalid && (namespace.dirty || namespace.touched)"
class="alert alert-danger">
<div *ngIf="namespace.errors.pattern">{{ 'CLUSTERS.NAMESPACE_PATTERN_VALIDATION_MESSAGE'
| translate }}</div>
<div *ngIf="namespace.errors.maxlength">{{
'CLUSTERS.NAMESPACE_MAX_LENGTH_VALIDATION_MESSAGE' | translate }}</div>
</div>
</div>
</div>
<div class="form-group">
<label for="deploymentdefaultstorageclass" class="col-sm-2 control-label">{{
'CLUSTERS.DEFAULT_STORAGE_CLASS' | translate }}</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="deploymentdefaultstorageclass"
name="deploymentdefaultstorageclass"
[(ngModel)]="cluster.deployment.defaultStorageClass" [disabled]="">
</div>
</div>
<div class="form-group">
<label for="forceDedicatedWorkers" class="col-sm-2 control-label">{{
'CLUSTERS.FORCE_DEDICATED_WORKERS' | translate }}</label>
<div class="col-sm-10">
<input type="checkbox" id="forceDedicatedWorkers" name="forceDedicatedWorkers"
[(ngModel)]="cluster.deployment.forceDedicatedWorkers"
[checked]="cluster.deployment.forceDedicatedWorkers == true" F>
</div>
</div>
<div class="form-group"> <label for="smtpServerHostname" class="col-sm-2 control-label">{{
'CLUSTERS.SMTP_SERVER_HOSTNAME' | translate }}: </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="smtpServerHostname" name="smtpServerHostname"
[(ngModel)]="cluster.deployment.smtpServerHostname" [disabled]="" required
#smtpServerHostname="ngModel">
<div class="alert alert-danger"
*ngIf="smtpServerHostname.invalid && (smtpServerHostname.dirty || smtpServerHostname.touched)">
<div *ngIf="smtpServerHostname.errors.required">SMTP server hostname is required</div>
</div>
</div>
</div>
<div class="form-group">
<label for="smtpServerPort" class="col-sm-2 control-label">{{ 'CLUSTERS.SMTP_SERVER_PORT' |
translate }}: </label>
<div class="col-sm-10">
<input type="number" class="form-control no-spin" id="smtpServerPort" name="smtpServerPort"
[(ngModel)]="cluster.deployment.smtpServerPort" [disabled]="" required
#smtpServerPort="ngModel">
<div class="alert alert-danger"
*ngIf="smtpServerPort.invalid && (smtpServerPort.dirty || smtpServerPort.touched)">
<div *ngIf="smtpServerPort.errors.required">SMTP server port is required</div>
</div>
</div>
</div>
<div class="form-group">
<label for="smtpServerUsername" class="col-sm-2 control-label">{{
'CLUSTERS.SMTP_SERVER_USERNAME' | translate }}: </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="smtpServerUsername" name="smtpServerUsername"
[(ngModel)]="cluster.deployment.smtpServerUsername" [disabled]="">
</div>
</div>
<div class="form-group">
<label for="smtpServerPass" class="col-sm-2 control-label">{{ 'CLUSTERS.SMTP_SERVER_PASSWORD' |
translate }}: </label>
<div class="col-sm-10">
<input type="password" class="form-control" id="smtpServerPass" name="smtpServerPass"
[(ngModel)]="cluster.deployment.smtpServerPassword" [disabled]="">
</div>
</div>
</div>
<!-- Hide external networks section -->
<div [hidden]="true" class="panel-default panel-heading">{{ 'CLUSTERS.EXTERNAL_NETWORKS' | translate }}
</div>
<div [hidden]="true" class="panel-body">
<table class="table table-hover table-condensed" aria-describedby="Clusters details table">
<thead>
<tr>
<th scope="col">{{ 'CLUSTERS.ADDRESS' | translate }}</th>
<th scope="col">{{ 'CLUSTERS.NETWORK' | translate }}</th>
<th scope="col">{{ 'CLUSTERS.NETMASK_LENGTH' | translate }}</th>
<th scope="col">{{ 'CLUSTERS.ASSIGNED' | translate }}</th>
<th scope="col">{{ 'CLUSTERS.ASSIGNED_SINCE' | translate }}</th>
<th scope="col">{{ 'CLUSTERS.ASSIGNED_TO' | translate }}</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-extnetwork [ngForOf]="cluster.externalNetworks" let-i="index"
[ngForTrackBy]="">
<tr>
<td>
<input type="text" class="form-control" [name]="'extnetextip'+i"
[(ngModel)]="extnetwork.externalIp" [disabled]="" required pattern="[0-9.]*"
#ip="ngModel">
<div class="alert alert-danger" *ngIf="ip.invalid && (ip.dirty || ip.touched)">
<div *ngIf="ip.errors.required">{{ 'CLUSTERS.IP_REQUIRED_MESSAGE' |
translate }}</div> <div *ngIf="ip.errors.pattern">{{ 'CLUSTERS.IP_VALIDATION_MESSAGE' |
translate }}</div>
</div>
</td>
<td>
<input type="text" class="form-control" [name]="'extnetextnet'+i"
[(ngModel)]="extnetwork.externalNetwork" [disabled]="" required
pattern="[0-9.]*" #network="ngModel">
<div class="alert alert-danger"
*ngIf="network.invalid && (network.dirty || network.touched)">
<div *ngIf="network.errors.required">{{ 'CLUSTERS.NETWORK_REQUIRED_MESSAGE'
| translate }}</div>
<div *ngIf="network.errors.pattern">{{
'CLUSTERS.NETWORK_ADDRESS_VALIDATION_MESSAGE' | translate }}</div>
</div>
</td>
<td>
<input type="text" class="form-control" [name]="'extnetmask'+i"
[(ngModel)]="extnetwork.externalNetworkMaskLength" [disabled]="" min="0"
max="32" #mask="ngModel">
<div class="alert alert-danger"
*ngIf="mask.invalid && (mask.dirty || mask.touched)">
<div *ngIf="mask.errors.min || mask.errors.max">{{
'CLUSTERS.MASK_VALIDATION_MESSAGE' | translate }}</div>
</div>
</td>
<td>
<input type="checkbox" [name]="'extnetassigned'+i"
[(ngModel)]="extnetwork.assigned" [checked]="extnetwork.assigned == true"
[disabled]="">
</td>
<td>
<input type="text" class="form-control" [name]="'extnetassince'+i"
[(ngModel)]="extnetwork.assignedSince" [disabled]=" !extnetwork.assigned">
</td>
<td>
<input type="text" class="form-control" [name]="'extnetassto'+i"
[(ngModel)]="extnetwork.assignedTo" [disabled]=" !extnetwork.assigned">
</td>
<td class="text-right">
<button *ngIf="" type="button" class="btn btn-sm btn-danger"
(click)="removeNetwork(extnetwork.id)">{{ 'CLUSTERS.REMOVE_BUTTON' |
translate }}
</button>
</td>
</tr>
</ng-template>
<tr *ngIf="">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-sm btn-secondary" (click)="addNetwork()">{{
'CLUSTERS.ADD_BUTTON' | translate }}
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="this.error" class="alert alert-danger">
<p>{{this.error}}</p>
</div>
<div class="flex justify-content-end">
<button [disabled]="!clusterForm.form.valid" type="submit" class="btn btn-primary" type="submit">{{ 'PORTAL_CONFIGURATION.SUBMIT_BUTTON' | translate }}</button>
</div>
<!-- <button
class="btn btn-primary">{{ 'CLUSTERS.SUBMIT_BUTTON' | translate }}</button> -->
</form>
</div>
</div>
<!-- <button type="button" class="btn btn-primary pull-right" (click)="nextStep()"
pTooltip="{{'APPS_WIZARD.ACCEPT_RULES_TOOLTIP' | translate}}" tooltipPosition="bottom" [showDelay]="50">{{'APPS_WIZARD.NEXT_BUTTON' | translate}}</button> -->
</div>