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>