clusterdetails.component.html

<div class="panel panel-default">
    <div class="panel-heading">{{ 'CLUSTERS.TITLE' | translate }}</div>
    <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">
                        <select class="form-control" id="ingresscontrollerconfigoption" name="ingresscontrollerconfigoption"
                                [(ngModel)]="cluster.ingress.controllerConfigOption" [disabled]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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">
                        <select class="form-control" id="deploymentnamespaceconfigoption" name="deploymentnamespaceconfigoption"
                                [(ngModel)]="cluster.deployment.namespaceConfigOption" [disabled]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)">
                        <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]="isInMode(ComponentMode.VIEW)">
                    </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" [disabled]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)">
                    </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]="isInMode(ComponentMode.VIEW)">
                    </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">&nbsp;</th>
                    </tr>
                    </thead>
                    <tbody>
                    <ng-template ngFor let-extnetwork [ngForOf]="cluster.externalNetworks" let-i="index" [ngForTrackBy]="trackByFn">
                        <tr>
                            <td>
                                <input type="text" class="form-control" [name]="'extnetextip'+i"
                                       [(ngModel)]="extnetwork.externalIp" [disabled]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)" 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]="isInMode(ComponentMode.VIEW)">
                            </td>
                            <td>
                                <input type="text" class="form-control" [name]="'extnetassince'+i"
                                       [(ngModel)]="extnetwork.assignedSince" [disabled]="isInMode(ComponentMode.VIEW) || !extnetwork.assigned">
                            </td>
                            <td>
                                <input type="text" class="form-control" [name]="'extnetassto'+i"
                                       [(ngModel)]="extnetwork.assignedTo" [disabled]="isInMode(ComponentMode.VIEW) || !extnetwork.assigned">
                            </td>
                            <td class="text-right">
                                <button *ngIf="!isInMode(ComponentMode.VIEW)" type="button" class="btn btn-sm btn-danger"
                                        (click)="removeNetwork(extnetwork.id)">{{ 'CLUSTERS.REMOVE_BUTTON' | translate }}
                                </button>
                            </td>
                        </tr>
                    </ng-template>
                    <tr *ngIf="!isInMode(ComponentMode.VIEW)">
                        <td></td><td></td><td></td><td></td><td></td><td></td>
                        <td>
                            <button type="button" class="btn btn-sm btn-success"
                                    (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>

            <button *ngIf="!isInMode(ComponentMode.VIEW)" [disabled]="!clusterForm.form.valid" type="submit"
                    class="btn btn-primary">{{ 'CLUSTERS.SUBMIT_BUTTON' | translate }}</button>
        </form>
    </div>
</div>