portainer/app/edge/components/edge-job-form/edgeJobForm.html

<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 required text-left">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 class="help-block" ng-show="edgeJobForm.edgejob_name.$invalid">
        <div class="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'"></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'"></pr-icon></span> Allowed characters are: [a-zA-Z0-9_.-]
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- !name-input -->
  <!-- cron-input -->
  <!-- edge-job-method-select -->
  <div class="col-sm-12 form-section-title"> Edge job configuration </div>

  <box-selector slim="true" radio-name="'configuration'" value="$ctrl.formValues.cronMethod" options="$ctrl.cronMethods" on-change="($ctrl.onCronMethodChange)"></box-selector>

  <!-- !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'"></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'"></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 class="help-block" ng-show="edgeJobForm.edgejob_cron.$invalid && edgeJobForm.edgejob_cron.$dirty">
          <div class="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'"></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'"></pr-icon></span> This field format is invalid.
              </p>
            </div>
          </div>
        </div>
      </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>
  <!-- !advanced-schedule -->

  <!-- execution-method -->
  <div ng-if="!$ctrl.model.Id">
    <div class="col-sm-12 form-section-title"> Job content </div>
    <box-selector value="$ctrl.formValues.method" options="$ctrl.buildMethods" radio-name="buildMethod" on-change="($ctrl.onBuildMethodChange)" slim="true"></box-selector>
  </div>
  <!-- !execution-method -->

  <!-- web-editor -->
  <!-- TODO use web-editor-form component -->
  <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"
          shell="true"
        ></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'"></pr-icon></span>
        </span>
      </div>
    </div>
  </div>
  <!-- !upload -->

  <div class="col-sm-12 form-section-title"> Edge Groups </div>
  <div class="form-group" ng-if="$ctrl.edgeGroups">
    <div class="col-sm-12">
      <edge-groups-selector ng-if="!$ctrl.noGroups" value="$ctrl.model.EdgeGroups" on-change="($ctrl.onChangeGroups)" items="$ctrl.edgeGroups"></edge-groups-selector>
    </div>
    <div ng-if="$ctrl.noGroups" class="col-sm-12 small text-muted">
      No Edge groups are available. Head over to the <a ui-sref="edge.groups">Edge groups view</a> to create one.
    </div>
  </div>

  <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.model.EdgeGroups.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>