You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
portainer/app/edge/components/edge-job-form/edgeJobForm.html

249 lines
9.7 KiB

<form class="form-horizontal -mt-4" name="edgeJobForm">
<div class="col-sm-12 form-section-title"> Edge job configuration </div>
<!-- name-input -->
<div class="form-group mt-4">
<label for="edgejob_name" class="col-sm-2 control-label text-left required">Name </label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
ng-model="$ctrl.model.Name"
ng-pattern="/^[a-zA-Z0-9][a-zA-Z0-9_.-]+$/"
id="edgejob_name"
name="edgejob_name"
placeholder="e.g. backup-app-prod"
required
auto-focus
/>
</div>
</div>
<div class="form-group" ng-show="edgeJobForm.edgejob_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="edgeJobForm.edgejob_name.$error">
<p ng-message="required" class="vertical-center">
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
</p>
<p ng-message="pattern" class="vertical-center">
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
</p>
</div>
</div>
</div>
<!-- !name-input -->
<!-- cron-input -->
<!-- edge-job-method-select -->
<div class="col-sm-12 form-section-title"> Edge job configuration </div>
<div class="form-group"></div>
<div class="form-group px-4">
<div class="boxselector_wrapper !mt-0">
<div>
<input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
<label for="config_basic">
<div class="boxselector_header vertical-center">
<pr-icon icon="'calendar'" feather="true"></pr-icon>
Basic configuration
</div>
<p>Select date from calendar</p>
</label>
</div>
<div>
<input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
<label for="config_advanced">
<div class="boxselector_header vertical-center">
<pr-icon icon="'edit'" feather="true"></pr-icon>
Advanced configuration
</div>
<p>Write your own cron rule</p>
</label>
</div>
</div>
</div>
<!-- !edge-job-method-select -->
<!-- basic-edge-job -->
<div ng-if="$ctrl.formValues.cronMethod === 'basic'">
<div class="form-group">
<label for="recurring" class="col-sm-2 control-label text-left">Recurring Edge job</label>
<div class="col-sm-10">
<label class="switch"><input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" /><span class="slider round"></span></label>
</div>
</div>
<!-- not-recurring -->
<div ng-if="!$ctrl.model.Recurring">
<div class="form-group">
<label for="edgejob_cron" class="col-sm-2 control-label text-left">Schedule date</label>
<div class="col-sm-10">
<input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" />
</div>
<div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
<div ng-show="edgeJobForm.datepicker.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="edgeJobForm.datepicker.$error">
<p ng-message="required" class="vertical-center">
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- !not-recurring -->
<!-- recurring -->
<div ng-if="$ctrl.model.Recurring">
<div class="form-group">
<label for="edgejob_value" class="col-sm-2 control-label text-left">Edge job time</label>
<div class="col-sm-10">
<select
id="edgejob_value"
name="edgejob_value"
class="form-control"
ng-model="$ctrl.formValues.scheduleValue"
ng-options="value.displayed for value in $ctrl.scheduleValues"
required
></select>
</div>
<div ng-show="edgeJobForm.edgejob_value.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="edgeJobForm.edgejob_value.$error">
<p ng-message="required" class="vertical-center">
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- !recurring -->
</div>
<!-- !basic-edge-job -->
<!-- advanced-schedule -->
<div ng-if="$ctrl.formValues.cronMethod === 'advanced'">
<div class="form-group">
<label for="edgejob_cron" class="col-sm-2 control-label text-left">Cron rule</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
ng-model="$ctrl.model.CronExpression"
id="edgejob_cron"
name="edgejob_cron"
placeholder="e.g. 0 2 * * *"
required
ng-pattern="$ctrl.cronRegex"
/>
</div>
<div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
</div>
<div class="form-group" ng-show="edgeJobForm.edgejob_cron.$invalid && edgeJobForm.edgejob_cron.$dirty">
<div class="col-sm-12 small text-warning">
<div ng-messages="edgeJobForm.edgejob_cron.$error">
<p ng-message="required" class="vertical-center">
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field is required.
</p>
<p ng-message="pattern" class="vertical-center">
<span><pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'" feather="true"></pr-icon></span> This field format is invalid.
</p>
</div>
</div>
</div>
</div>
<!-- !advanced-schedule -->
<!-- execution-method -->
<div ng-if="!$ctrl.model.Id">
<div class="col-sm-12 form-section-title"> Job content </div>
<div class="form-group"></div>
<div class="form-group px-4">
<div class="boxselector_wrapper !mt-0">
<div>
<input type="radio" id="method_editor" ng-model="$ctrl.formValues.method" value="editor" />
<label for="method_editor">
<div class="boxselector_header vertical-center">
<pr-icon icon="'edit'" feather="true"></pr-icon>
Web editor
</div>
<p>Use our Web editor</p>
</label>
</div>
<div>
<input type="radio" id="method_upload" ng-model="$ctrl.formValues.method" value="upload" />
<label for="method_upload">
<div class="boxselector_header vertical-center">
<pr-icon icon="'upload'" feather="true"></pr-icon>
Upload
</div>
<p>Upload from your computer</p>
</label>
</div>
</div>
</div>
</div>
<!-- !execution-method -->
<!-- web-editor -->
<div ng-show="$ctrl.formValues.method === 'editor'">
<div class="col-sm-12 form-section-title"> Web editor </div>
<div class="form-group">
<div class="col-sm-12">
<code-editor
identifier="execute-edge-job-editor"
placeholder="# Define or paste the content of your script file here"
on-change="($ctrl.editorUpdate)"
value="$ctrl.model.FileContent"
></code-editor>
</div>
</div>
</div>
<!-- !web-editor -->
<!-- upload -->
<div ng-show="$ctrl.formValues.method === 'upload'">
<div class="col-sm-12 form-section-title"> Upload </div>
<div class="form-group">
<span class="col-sm-12 text-muted small"> You can upload a script file from your computer. </span>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.model.File">Select file</button>
<span class="space-left">
{{ $ctrl.model.File.name }}
<span ng-if="!$ctrl.model.File"><pr-icon icon="'x'" class-name="'icon icon-danger'" feather="true"></pr-icon></span>
</span>
</div>
</div>
</div>
<!-- !upload -->
<div class="col-sm-12 form-section-title"> Target environments </div>
<!-- node-selection -->
<associated-endpoints-selector
endpoint-ids="$ctrl.model.Endpoints"
tags="$ctrl.tags"
groups="$ctrl.groups"
has-backend-pagination="true"
on-associate="($ctrl.associateEndpoint)"
on-dissociate="($ctrl.dissociateEndpoint)"
></associated-endpoints-selector>
<!-- !node-selection -->
<!-- actions -->
<div class="col-sm-12 form-section-title"> Actions </div>
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="$ctrl.actionInProgress || !edgeJobForm.$valid
|| $ctrl.model.Endpoints.length === 0
|| ($ctrl.formValues.method === 'upload' && !$ctrl.model.File)
|| ($ctrl.formValues.method === 'editor' && !$ctrl.model.FileContent)
"
ng-click="$ctrl.action()"
button-spinner="$ctrl.actionInProgress"
>
<span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
<span ng-show="$ctrl.actionInProgress">In progress...</span>
</button>
<span class="text-danger space-left" ng-if="$ctrl.state.formValidationError">
{{ $ctrl.state.formValidationError }}
</span>
</div>
</div>
<!-- !actions -->
</form>