services/self-service/src/main/resources/webapp/src/app/resources/scheduler/scheduler.component.html

<!--
  ~ 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="scheduler-dialog" id="dialog-box">
  <header class="dialog-header">
    <h4 class="modal-title">Scheduler
      <span *ngIf="destination">for
        <b *ngIf="destination.type === 'EXPLORATORY'; else resource">{{ destination.name }}</b>
        <ng-template #resource><b>{{ destination.computational_name }}</b></ng-template>
      </span>
    </h4>
    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
  </header>
  <div class="dialog-content">
    <div *ngIf="destination" class="content-box">
      <form [formGroup]="schedulerForm">
        <div class="enable-schedule">
          <mat-slide-toggle labelPosition="after" [checked]="enableSchedule" (change)="toggleSchedule($event)">
            <span *ngIf="toggleSchedule" class="hold-label">Scheduler by time</span>
          </mat-slide-toggle>
          <div class="idle" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
              <mat-slide-toggle labelPosition="before" [checked]="enableIdleTime" (change)="toggleIdleTimes($event)">
                  <span *ngIf="toggleSchedule" class="hold-label">Scheduler by inactivity</span>
              </mat-slide-toggle>
          </div>
        </div>

          <div class="note m-bott-10" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
              NOTE: In case of turning on inactivity time-check, your schedule
              configuration will be decommissioned.
          </div>

        <div class="control-group idle-control" [ngClass]="{ show: enableIdleTimeView }">
          <label class="label">Scheduler by inactivity, min</label>
          <div class="control">
            <input type="text" class="form-control" placeholder="Enter time in min" formControlName="inactivityTime"
              (keypress)="CheckUtils.isNumberKey($event)" (keydown.arrowup)="inactivityCounter($event, 'increment')"
              (keydown.arrowdown)="inactivityCounter($event, 'decrement')" />
            <span class="error" *ngIf="!schedulerForm.controls.inactivityTime.valid">
              <span>The value should be an integer greater than or equal to {{ inactivityLimits.min }} and
                cannot exceed 1 week ({{ inactivityLimits.max }}) in min.</span>
            </span>
          </div>
        </div>
          <div class="schedule-by-time" *ngIf="!enableIdleTimeView" [ngClass]="{ hide: enableIdleTimeView, resource: destination.type === 'СOMPUTATIONAL',
                       des: destination.image === 'docker.datalab-dataengine-service' }">
              <div class="row-wrap" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
                  <div class="col-3">
                      <mat-form-field>
                          <input matInput [matDatepicker]="startDate" placeholder="Choose start date"
                                 formControlName="startDate">
                          <mat-datepicker-toggle

                                  matSuffix [for]="startDate"
                                  [ngClass]="{'not-allowed' : destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule }"></mat-datepicker-toggle>
                          <mat-datepicker #startDate></mat-datepicker>
                      </mat-form-field>
                  </div>
                  <div class="col-3">
              <mat-form-field>
                <input matInput [matDatepicker]="finishDate" placeholder="Choose finish date"
                  formControlName="finishDate">
                <mat-datepicker-toggle matSuffix [for]="finishDate" [ngClass]="{'not-allowed' : destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule }"></mat-datepicker-toggle>
                <mat-datepicker #finishDate ></mat-datepicker>
              </mat-form-field>
            </div>
            <div class="col-3" *ngIf="destination.type === 'СOMPUTATIONAL'; else timezone">
              <mat-form-field>
                <input matInput [matDatepicker]="terminateDate" placeholder="Choose terminate date"
                  formControlName="terminateDate" >
                <mat-datepicker-toggle matSuffix [for]="terminateDate"></mat-datepicker-toggle>
                <mat-datepicker #terminateDate></mat-datepicker>
              </mat-form-field>
            </div>
            <ng-template #timezone>
              <div class="col-3">
                <mat-form-field class="timezone-offset">
                  <mat-select placeholder="Select timezone" [(value)]="tzOffset" panelClass="scrolling timezone-mat-select"
                    [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
                    <mat-option *ngFor="let zone of zones | keys" [value]="zone.key" matTooltip="{{ zone.value }}"
                      matTooltipShowDelay="1000" matTooltipPosition="above"> GMT {{zone.key}} {{ zone.value }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </ng-template>
          </div>

              <div class="row-wrap" *ngIf="destination.image !== 'docker.datalab-dataengine-service'">
                  <div class="control-group col-3 time-range">
                      <datalab-time-picker [(pickTime)]="startTime" [(milisecTime)]="startTimeMilliseconds"
                                           [label]="'Choose start time'"
                                           [disable]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
                          {{destination.type}}
                      </datalab-time-picker>
                  </div>
                  <div class="control-group col-3 time-range">
                      <datalab-time-picker [(pickTime)]="endTime" [(milisecTime)]="endTimeMilliseconds"
                                           [label]="'Choose finish time'"
                                           [disable]="destination.type === 'СOMPUTATIONAL' && inherit ||!enableSchedule">
                      </datalab-time-picker>
                  </div>
                  <div class="control-group col-3 time-range" *ngIf="destination.type === 'СOMPUTATIONAL'">
                      <datalab-time-picker [(pickTime)]="terminateTime" [(milisecTime)]="terminateTimeMilliseconds"
                                           [label]="'Choose terminate time'"
                                           [disable]="!enableSchedule"></datalab-time-picker>
                  </div>
            <div *ngIf="timeReqiered" class="error term m-bott-10 mt-5"><span>At least one of time range fields
                should be selected</span>
            </div>
            <div *ngIf="terminateDataReqiered">
              <span class="error term m-bott-10 mt-5">Both terminate date and time fields should be selected</span>
            </div>
          </div>

              <div class="row-wrap"
                   *ngIf="destination.type === 'СOMPUTATIONAL' && destination.image !== 'docker.datalab-dataengine-service'">
                  <div class="col-3">
                      <mat-form-field class="timezone-offset">
                          <mat-select placeholder="Select timezone" [(value)]="tzOffset"
                                      [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
                              <mat-option *ngFor="let zone of zones | keys" [value]="zone.key"
                                          matTooltip="{{ zone.value }}"
                                          matTooltipShowDelay="1000" matTooltipPosition="above"> GMT {{zone.key}} {{
                                  zone.value }}
                              </mat-option>
                          </mat-select>
                      </mat-form-field>
                  </div>
          </div>
              <div class="control-group"
                   *ngIf="destination && destination.image !== 'docker.datalab-dataengine-service'">
                  <label class="label repeat" for="options">Repeat on :</label>
                  <div class="days-block">
                      <label>Start date:</label>
                      <mat-button-toggle *ngFor="let day of weekdays; let i = index" value="{{ day }}"
                                         (change)="onDaySelect($event, day, 'start')"
                                         [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
                                         [checked]="selectedStartWeekDays[day.toLowerCase()]">{{ day[0] }}
                      </mat-button-toggle>
                  </div>
                  <div class="days-block">
              <label>Stop date:</label>
              <mat-button-toggle *ngFor="let day of weekdays; let i = index" value="{{ day }}"
                (change)="onDaySelect($event, day, 'stop')"
                [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule"
                [checked]="selectedStopWeekDays[day.toLowerCase()]">{{ day[0] }}
              </mat-button-toggle>
            </div>
          </div>

              <div class="des-block" *ngIf="destination.image === 'docker.datalab-dataengine-service'">
                  <div class="row-wrap">
                      <div class="col-3">
                          <mat-form-field>
                              <input matInput [matDatepicker]="terminateDate" placeholder="Choose terminate date"
                                     formControlName="terminateDate">
                              <mat-datepicker-toggle matSuffix [for]="terminateDate"></mat-datepicker-toggle>
                              <mat-datepicker #terminateDate></mat-datepicker>
                          </mat-form-field>
                      </div>
                      <div class="control-group col-3 time-range" *ngIf="destination.type === 'СOMPUTATIONAL'">
                          <datalab-time-picker [(pickTime)]="terminateTime" [(milisecTime)]="terminateTimeMilliseconds"
                                               [label]="'Choose terminate time'"
                                               [disable]="!enableSchedule"></datalab-time-picker>
                      </div>
              <div class="col-3">
                <mat-form-field class="timezone-offset">
                  <mat-select placeholder="Select timezone" [(value)]="tzOffset"
                    [disabled]="destination.type === 'СOMPUTATIONAL' && inherit || !enableSchedule">
                    <mat-option *ngFor="let zone of zones | keys" [value]="zone.key" matTooltip="{{ zone.value }}"
                      matTooltipShowDelay="1000" matTooltipPosition="above"> GMT {{zone.key}} {{ zone.value }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </div>
            <div *ngIf="terminateDataReqiered">
              <small class="error m-bott-10 mt-5 ">Both terminate date and time fields should be selected</small>
            </div>
          </div>

              <div class="options"
                   *ngIf="destination && allowInheritView && destination.image !== 'docker.datalab-dataengine-service'">
                  <mat-slide-toggle labelPosition="after" [checked]="inherit" (change)="toggleInherit($event)"
                                    [disabled]="!enableSchedule || (!parentInherit && destination.type === 'СOMPUTATIONAL')">
              <span *ngIf="destination.type === 'EXPLORATORY'; else resourcePropagation" class="hold-label">
                <span>Start all spark clusters associated with current notebook based on notebook start
                  schedule</span>
              </span>
                      <ng-template #resourcePropagation>
                          <span class="hold-label">Inherit notebook schedule settings</span>
                      </ng-template>
                  </mat-slide-toggle>
          </div>
        </div>

        <div class="options" *ngIf="destination.type === 'EXPLORATORY'">
          <mat-slide-toggle labelPosition="after" [checked]="considerInactivity"
            [disabled]="!enableSchedule && !enableIdleTime" (change)="considerInactivity = !considerInactivity">
            <span class="hold-label">
              <span>In case of running jobs on Spark standalone, notebook stop scheduler will not be triggered</span>
            </span>
          </mat-slide-toggle>
        </div>

      </form>
      <div class="text-center m-top-30">
        <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
        <button mat-raised-button type="button" class="butt butt-success action"
          [disabled]="enableIdleTime && !schedulerForm.controls.inactivityTime.valid"
          (click)="scheduleInstance_btnClick()">Save</button>
      </div>
    </div>
  </div>
</div>