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']"> </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 value="$ctrl.formValues.Groups" on-change="($ctrl.onChangeGroups)" items="$ctrl.edgeGroups"></edge-groups-selector>

          <edge-stack-deployment-type-selector
            value="$ctrl.formValues.DeploymentType"
            has-docker-endpoint="$ctrl.hasDockerEndpoint()"
            has-kube-endpoint="$ctrl.hasKubeEndpoint()"
            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"
          ></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>

          <!-- 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>