portainer/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html

<page-header title="'Create Edge stack'" breadcrumbs="[{label:'Edge Stacks', link:'edge.stacks'}, 'Create Edge stack']" reload="true"> </page-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.form">
          <!-- name-input -->
          <div class="form-group">
            <label for="stack_name" class="col-sm-1 control-label required text-left"> Name </label>
            <div class="col-sm-11">
              <input
                type="text"
                class="form-control"
                ng-model="$ctrl.formValues.Name"
                id="stack_name"
                name="nameField"
                ng-pattern="$ctrl.formValues.DeploymentType === $ctrl.EditorType.Compose ? STACK_NAME_VALIDATION_REGEX : ''"
                placeholder="e.g. mystack"
                auto-focus
                required
                data-cy="edgeStackCreate-nameInput"
              />
              <div class="help-block" ng-show="$ctrl.form.$invalid">
                <div class="small text-warning">
                  <div ng-messages="$ctrl.form.$error">
                    <p ng-message="required" class="vertical-center">
                      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
                      <span>Name is required.</span>
                    </p>
                    <p ng-message="pattern" class="vertical-center">
                      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
                      <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- !name-input -->

          <edge-groups-selector ng-if="$ctrl.formValues.Groups" value="$ctrl.formValues.Groups" on-change="($ctrl.onChangeGroups)"></edge-groups-selector>

          <p class="col-sm-12 vertical-center help-block small text-warning" ng-if="$ctrl.formValues.DeploymentType === undefined">
            <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> There are no available deployment types when there is more than one type of environment in your edge group
            selection (e.g. Kubernetes and Docker environments). Please select edge groups that have environments of the same type.
          </p>

          <edge-stack-deployment-type-selector
            value="$ctrl.formValues.DeploymentType"
            has-docker-endpoint="$ctrl.hasType($ctrl.EnvironmentType.EdgeAgentOnDocker)"
            has-kube-endpoint="$ctrl.hasType($ctrl.EnvironmentType.EdgeAgentOnKubernetes)"
            on-change="($ctrl.onChangeDeploymentType)"
          ></edge-stack-deployment-type-selector>

          <edge-stacks-docker-compose-form
            ng-if="$ctrl.formValues.DeploymentType == $ctrl.EditorType.Compose"
            form-values="$ctrl.formValues"
            state="$ctrl.state"
            template="$ctrl.state.selectedTemplate"
            on-change-template="($ctrl.onChangeTemplate)"
          ></edge-stacks-docker-compose-form>

          <edge-stacks-kube-manifest-form
            ng-if="$ctrl.formValues.DeploymentType == $ctrl.EditorType.Kubernetes"
            form-values="$ctrl.formValues"
            state="$ctrl.state"
          ></edge-stacks-kube-manifest-form>

          <div ng-if="$ctrl.isBE">
            <environment-variables-panel values="$ctrl.formValues.envVars" on-change="($ctrl.onEnvVarChange)"></environment-variables-panel>
          </div>

          <!-- 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.state.actionInProgress || $ctrl.formIsInvalid()"
                ng-click="$ctrl.createStack()"
                button-spinner="$ctrl.state.actionInProgress"
                analytics-on
                analytics-event="edge-stack-creation"
                analytics-category="edge"
                analytics-properties="$ctrl.buildAnalyticsProperties()"
                data-cy="edgeStackCreate-createStackButton"
              >
                <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
                <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
              </button>
              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
                {{ $ctrl.state.formValidationError }}
              </span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>