| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <div class="base-retreat configuration"> |
| <div class="sub-nav"> |
| <div class="selection"> |
| <ng-template [ngIf]="endpoints?.length > 1"> |
| <label class="label">Selected endpoint </label> |
| <div class="mat-reset"> |
| <div class="control selector-wrapper"> |
| <mat-form-field [ngClass]="{ 'not-active' : services['provisioning'].isConfigChanged || services['self-service'].isConfigChanged || services['billing'].isConfigChanged }"> |
| <mat-label>Select endpoint</mat-label> |
| <mat-select |
| disableOptionCentering |
| [(value)]="activeEndpoint" |
| panelClass="top-select scrolling" |
| [disabled]="services['provisioning'].isConfigChanged || services['self-service'].isConfigChanged || services['billing'].isConfigChanged"> |
| <mat-option |
| *ngFor="let endpoint of endpoints" |
| [value]="endpoint.name" |
| [disabled]="endpoint.status !== 'ACTIVE'" |
| (click)="setActiveEndpoint(endpoint.name)"> |
| {{ endpoint.name === 'local' ? endpoint.name : endpoint.name + ' (external endpoint)'}}{{endpoint.status !== 'ACTIVE' ? ', inactive' : ''}} |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </div> |
| </div> |
| </ng-template> |
| </div> |
| <div> |
| <ng-template [ngIf]="activeTab.index !== 0"> |
| <button mat-raised-button class="butt" |
| (click)="action('save')" |
| [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged" |
| > |
| Save |
| </button> |
| <button mat-raised-button class="butt" |
| (click)="action('discard')" |
| [disabled]="!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged" |
| > |
| Discard changes |
| </button> |
| </ng-template> |
| <button |
| mat-raised-button type="button" |
| class="butt action" |
| (click)="restartServices()" |
| [disabled]="isServiceSelected()" |
| > |
| Restart |
| </button> |
| <button mat-raised-button class="butt" (click)="refreshConfig()"> |
| <i class="material-icons refresh-icon">autorenew</i>Refresh |
| </button> |
| </div> |
| </div> |
| <mat-divider></mat-divider> |
| <div class="configuration-wrapper"> |
| <mat-tab-group animationDuration="0.5ms" (selectedTabChange)="tabChanged($event)" [selectedIndex]=activeTab.index> |
| <mat-tab label="Main" |
| [disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 0" |
| > |
| <h4>Main settings</h4> |
| <div class="main-wrapper"> |
| <section class="section"> |
| <p class="section-title">Restart services</p> |
| <div class="section-content"> |
| <ul class="list-menu selection-list"> |
| <li *ngFor="let service of services | keys"> |
| <p |
| class="list-item" |
| role="menuitem" |
| *ngIf="(activeEndpoint !== 'local' && (service.key === 'provisioning' || service.key === 'billing') || activeEndpoint === 'local')"> |
| <span (click)="toggleSettings(service.key);$event.stopPropagation()" class="d-flex"> |
| <div class="checkbox-wrap"> |
| <datalab-checkbox |
| [checked]="services[service.key].selected" |
| (toggleSelection)="toggleSettings(service.key)" |
| > |
| </datalab-checkbox> |
| </div> |
| {{service.value.label}} |
| </span> |
| </p> |
| </li> |
| </ul> |
| </div> |
| </section> |
| </div> |
| </mat-tab> |
| |
| <mat-tab label="Self-service" |
| *ngIf="activeEndpoint === 'local'" |
| [disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 1" |
| |
| > |
| <h4>Edit self-service.yml</h4> |
| <div class="editor-wrap"> |
| <div #selfEditor ace-editor mode="yaml" [(text)]="services['self-service'].config" [autoUpdateContent]="true" (textChange)="configUpdate('self-service')"></div> |
| </div> |
| </mat-tab> |
| |
| <mat-tab label="Provisioning" |
| [disabled]="!(!services['provisioning'].isConfigChanged |
| && !services['self-service'].isConfigChanged |
| && !services['billing'].isConfigChanged) |
| && activeTab.index !== 2"> |
| |
| <h4>Edit provisioning.yml</h4> |
| <div class="editor-wrap"> |
| <div #provEditor ace-editor [(text)]="services['provisioning'].config" [autoUpdateContent]="true" mode="yaml" (textChange)="configUpdate('provisioning')"></div> |
| </div> |
| </mat-tab> |
| |
| <mat-tab label="Billing" |
| [disabled]="!(!services['provisioning'].isConfigChanged && !services['self-service'].isConfigChanged && !services['billing'].isConfigChanged) && activeTab.index !== 3" |
| > |
| <h4>Edit billing.yml</h4> |
| <div class="editor-wrap"> |
| <div #billingEditor ace-editor mode="yaml" [(text)]="services['billing'].config" [autoUpdateContent]="true" (textChange)="configUpdate('billing')"></div> |
| |
| </div> |
| </mat-tab> |
| </mat-tab-group> |
| </div> |
| </div> |
| |