portainer/app/edge/views/edge-stacks/createEdgeStackView/createEdgeStackView.html

<rd-header>
  <rd-header-title title-text="Create Edge stack"></rd-header-title>
  <rd-header-content> <a ui-sref="edge.stacks">Edge Stacks</a> &gt; Create Edge stack </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="stack_name" class="col-sm-1 control-label text-left">
              Name
            </label>
            <div class="col-sm-11">
              <input type="text" class="form-control" ng-model="$ctrl.formValues.Name" id="stack_name" placeholder="e.g. mystack" auto-focus data-cy="edgeStackCreate-nameInput" />
            </div>
          </div>
          <!-- !name-input -->

          <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" model="$ctrl.formValues.Groups" on-change="(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>
          <!-- build-method -->
          <div class="col-sm-12 form-section-title">
            Build method
          </div>
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0;">
            <div class="boxselector_wrapper">
              <div>
                <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
                <label for="method_editor" data-cy="edgeStackCreate-webEditorButton">
                  <div class="boxselector_header">
                    <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                    Web editor
                  </div>
                  <p>Use our Web editor</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload" ng-change="$ctrl.onChangeMethod()" />
                <label for="method_upload" data-cy="edgeStackCreate-uploadButton">
                  <div class="boxselector_header">
                    <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
                    Upload
                  </div>
                  <p>Upload from your computer</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_repository" ng-model="$ctrl.state.Method" value="repository" ng-change="$ctrl.onChangeMethod()" />
                <label for="method_repository" data-cy="edgeStackCreate-repoButton">
                  <div class="boxselector_header">
                    <i class="fab fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
                    Repository
                  </div>
                  <p>Use a git repository</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_template" ng-model="$ctrl.state.Method" value="template" ng-change="$ctrl.onChangeMethod()" />
                <label for="method_template" data-cy="edgeStackCreate-templateButton">
                  <div class="boxselector_header">
                    <i class="fas fa-rocket" aria-hidden="true" style="margin-right: 2px;"></i>
                    Template
                  </div>
                  <p>Use an Edge stack template</p>
                </label>
              </div>
            </div>
          </div>
          <!-- !build-method -->
          <!-- web-editor -->
          <div ng-show="$ctrl.state.Method === 'editor'">
            <div class="col-sm-12 form-section-title">
              Web editor
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                You can get more information about Compose file format in the
                <a href="https://docs.docker.com/compose/compose-file/" target="_blank">
                  official documentation
                </a>
                .
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <code-editor
                  identifier="stack-creation-editor"
                  placeholder="# Define or paste the content of your docker-compose file here"
                  yml="true"
                  value="$ctrl.formValues.StackFileContent"
                  on-change="($ctrl.editorUpdate)"
                ></code-editor>
              </div>
            </div>
          </div>
          <!-- !web-editor -->
          <!-- upload -->
          <div ng-show="$ctrl.state.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 Compose 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.formValues.StackFile">
                  Select file
                </button>
                <span style="margin-left: 5px;">
                  {{ $ctrl.formValues.StackFile.name }}
                  <i class="fa fa-times red-icon" ng-if="!$ctrl.formValues.StackFile" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <!-- !upload -->
          <!-- repository -->
          <git-form ng-show="$ctrl.state.Method === 'repository'" model="$ctrl.formValues" on-change="($ctrl.onChangeFormValues)"></git-form>
          <!-- !repository -->
          <!-- template -->
          <div ng-show="$ctrl.state.Method === 'template'">
            <div class="form-group">
              <label for="stack_template" class="col-sm-1 control-label text-left">
                Template
              </label>
              <div class="col-sm-11">
                <select
                  class="form-control"
                  ng-model="$ctrl.selectedTemplate"
                  ng-options="template as template.label for template in $ctrl.templates"
                  ng-change="$ctrl.onChangeTemplate($ctrl.selectedTemplate)"
                >
                  <option value="" label="Select an Edge stack template" disabled selected="selected"> </option>
                </select>
              </div>
            </div>
            <!-- description -->
            <div ng-if="$ctrl.selectedTemplate.note">
              <div class="col-sm-12 form-section-title">
                Information
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <div class="template-note" ng-bind-html="$ctrl.selectedTemplate.note"></div>
                </div>
              </div>
            </div>
            <!-- !description -->
            <!-- editor -->
            <div ng-if="$ctrl.selectedTemplate && $ctrl.formValues.StackFileContent">
              <div class="col-sm-12 form-section-title">
                Web editor
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <code-editor
                    identifier="template-content-editor"
                    placeholder="# Define or paste the content of your docker-compose file here"
                    yml="true"
                    value="$ctrl.formValues.StackFileContent"
                    on-change="($ctrl.editorUpdate)"
                  ></code-editor>
                </div>
              </div>
            </div>
          </div>
          <!-- !editor -->
          <!-- !template -->
          <!-- 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.formValues.Groups.length
              || ($ctrl.state.Method === 'editor' && !$ctrl.formValues.StackFileContent)
              || ($ctrl.state.Method === 'upload' && !$ctrl.formValues.StackFile)
              || ($ctrl.state.Method === 'repository' && ((!$ctrl.formValues.RepositoryURL || !$ctrl.formValues.ComposeFilePathInRepository) || ($ctrl.formValues.RepositoryAuthentication && (!$ctrl.formValues.RepositoryUsername || !$ctrl.formValues.RepositoryPassword))))
              || !$ctrl.formValues.Name"
                ng-click="$ctrl.createStack()"
                button-spinner="$ctrl.state.actionInProgress"
                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>