| <!-- |
| 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="mask" *ngIf='maskOpen' (click)="close()"></div> |
| <div class="container-fluid"> |
| <div class="row"> |
| <h5 class="over-title margin-bottom-15 job">Create Job</h5> |
| </div> |
| <!--//row--> |
| <div class="row"> |
| <!-- <form name="Form" id="form" novalidate> --> |
| <form name="jobForm" id="form" (ngSubmit)="submit(jobForm)" #jobForm="ngForm" novalidate> |
| <div class="formStep"> |
| <label class="stepDesc info">Please setup the job required information</label> |
| <div class="container-fluid"> |
| <!-- schema definition list --> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <fieldset (window:resize)="onResize($event)"> |
| <legend> |
| Required Information |
| </legend> |
| <div class="y-scrollable"> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group" |
| [ngClass]="{'has-error':jobName.dirty&&jobName.invalid, 'has-success':jobName.valid}"> |
| <label class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Job Name<span class="symbol required"></span>: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <input type="text" class="form-control" [(ngModel)]="jobname" name="jobName" #jobName="ngModel" |
| placeholder="Please input the job name" required pattern="^[a-zA-Z0-9_-]*$" id="jobName"> |
| <span class="error text-small block " *ngIf="jobName.dirty && (jobName.errors?.required)"> |
| Job Name is required</span> |
| <span class="error text-small block " *ngIf="jobName.dirty && (jobName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group"> |
| <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Measure Name<span class="symbol required"></span>: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <select id="measureSelector" class="form-control" ngControl="name" required name="measure.name" |
| [(ngModel)]="measure" (ngModelChange)="onChange($event)"> |
| <option *ngFor="let row of Measures" value="{{row.name}}">{{row.name}}</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-12 col-lg-12 col-sm-12"> |
| <div class="form-group"> |
| <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> |
| Cron Expression<span class="symbol required"></span>: |
| </label> |
| <div class="col-md-10 col-lg-10 col-sm-10 "> |
| <input class="form-control" ngControl="name" required [(ngModel)]="cronExp" name="cronExp" |
| placeholder="Quartz format:[Seconds] [Minutes] [Hours] [Day of month] [Month] [Day of week] [Year(Optional)]"> |
| </div> |
| </div> |
| </div> |
| <div *ngFor="let connector of this.dropdownList; let i=index"> |
| <div> |
| <label style="padding-left: 30px;padding-top: 10px;"> |
| please select data range for {{connector.name}} |
| </label> |
| </div> |
| <p style="margin-left:60px" class="setcolor"> |
| <i class="fa fa-info-circle"></i> One step means a partition size,and {{connector.name}} partition |
| size = {{connector.size}} |
| </p> |
| <div class="col-md-11 col-lg-11 col-sm-11 center"> |
| begin : |
| <input type="number" class="setborder" value="{{ someKeyboard[i][0] }}" |
| [(ngModel)]="someKeyboard[i][0]" max="0" name="begin{{i}}" |
| (ngModelChange)="changeRange(index,someKeyboard[i][0],i)"> end : |
| <input type="number" class="setborder" max="0" value="{{ someKeyboard[i][1] }}" |
| [(ngModel)]="someKeyboard[i][1]" name="end{{i}}" (ngModelChange)="changeRange(1,$event,i)"> |
| </div> |
| <nouislider class="col-md-11 col-lg-11 col-sm-11 center" id="slider{{i}}" #sliderRef |
| name="slider{{i}}" [config]="someKeyboardConfig[i]" [(ngModel)]="someKeyboard[i]" |
| (ngModelChange)="rangeChange($event,i)" (keyup)="blinkKeyupLabel()" |
| (keydown)="blinkKeydownLabel()" style="margin-bottom: 5rem"></nouislider> |
| </div> |
| </div> |
| <div class="setcolor bottom-info"> |
| <p> |
| <i class="fa fa-info-circle"></i>After submitted, please go to |
| "<a class="bark-link" href="/jobs">Jobs</a>" to check the job status |
| </p> |
| <p> |
| <i class="fa fa-info-circle"></i>Cron expression is using browser's time zone: {{timezone}} |
| </p> |
| </div> |
| </fieldset> |
| </div> |
| <div class="form-group btn-container"> |
| <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev()"> |
| <i class="fa fa-arrow-circle-left"></i> Back |
| </button> |
| <toaster-container></toaster-container> |
| <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="submit(jobForm)"> |
| Submit |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="modal fade" id="confirm-job" role="dialog" [ngClass]="{'in': visibleAnimate}" |
| [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" |
| (click)="onContainerClicked($event)"> |
| <div class="modal-dialog modal-xg modal-lg"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="hide()">× |
| </button> |
| <h4 class="modal-title">Save the job with the below information?</h4> |
| </div> |
| <div class="modal-body"> |
| <div class="container-fluid" id="viewJobContent" style="overflow:auto;"> |
| <div class="row"> |
| <h5 class="over-title margin-bottom-15">Basic information</h5> |
| </div> |
| <div class="row"> |
| <div class="col-lg-12 col-md-12 col-sm-12"> |
| <div id="viewrule-definition" class="viewrule-content"> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Measure Name: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> |
| {{measure}} |
| <!-- {{Measures}} --> |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Cron Expression: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> |
| {{cronExp}} |
| </div> |
| </div> |
| <div *ngFor="let connector of this.dropdownList; let i=index"> |
| <div class="row"> |
| <label class="col-md-12 col-lg-12 col-sm-12"> |
| {{connector.name}}: |
| </label> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Begin: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> |
| {{originBegin[i]}} |
| </div> |
| </div> |
| <div class="row"> |
| <label class="col-md-4 col-lg-4 col-sm-4"> |
| Length: |
| </label> |
| <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> |
| {{originLength[i]}} |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <br/> |
| </div> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hide()">Cancel</button> |
| <button type="button" id="save" class="btn btn-primary" (click)="save()">Save</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
