mirror of https://github.com/portainer/portainer
292 lines
13 KiB
HTML
292 lines
13 KiB
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> > 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 />
|
|
</div>
|
|
</div>
|
|
<!-- !name-input -->
|
|
<div class="form-group">
|
|
<span class="col-sm-12 text-muted small">
|
|
This stack will be deployed using the equivalent of the
|
|
<code>docker stack deploy</code> command.
|
|
</span>
|
|
</div>
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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 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 -->
|
|
<div ng-show="$ctrl.state.Method === 'repository'">
|
|
<div class="col-sm-12 form-section-title">
|
|
Git repository
|
|
</div>
|
|
<div class="form-group">
|
|
<span class="col-sm-12 text-muted small">
|
|
You can use the URL of a git repository.
|
|
</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="stack_repository_url" class="col-sm-2 control-label text-left">Repository URL</label>
|
|
<div class="col-sm-10">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
ng-model="$ctrl.formValues.RepositoryURL"
|
|
id="stack_repository_url"
|
|
placeholder="https://github.com/portainer/portainer-compose"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<span class="col-sm-12 text-muted small">
|
|
Specify a reference of the repository using the following syntax: branches with
|
|
<code>refs/heads/branch_name</code> or tags with <code>refs/tags/tag_name</code>. If not specified, will use the default <code>HEAD</code> reference normally the
|
|
<code>master</code> branch.
|
|
</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="stack_repository_url" class="col-sm-2 control-label text-left">Repository reference</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" ng-model="$ctrl.formValues.RepositoryReferenceName" id="stack_repository_reference_name" placeholder="refs/heads/master" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<span class="col-sm-12 text-muted small">
|
|
Indicate the path to the Compose file from the root of your repository.
|
|
</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="stack_repository_path" class="col-sm-2 control-label text-left">Compose path</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" ng-model="$ctrl.formValues.ComposeFilePathInRepository" id="stack_repository_path" placeholder="docker-compose.yml" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<label class="control-label text-left">
|
|
Authentication
|
|
</label>
|
|
<label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.formValues.RepositoryAuthentication" /><i></i> </label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-if="$ctrl.formValues.RepositoryAuthentication">
|
|
<span class="col-sm-12 text-muted small">
|
|
If your git account has 2FA enabled, you may receive an
|
|
<code>authentication required</code> error when deploying your stack. In this case, you will need to provide a personal-access token instead of your password.
|
|
</span>
|
|
</div>
|
|
<div class="form-group" ng-if="$ctrl.formValues.RepositoryAuthentication">
|
|
<label for="repository_username" class="col-sm-1 control-label text-left">Username</label>
|
|
<div class="col-sm-11 col-md-5">
|
|
<input type="text" class="form-control" ng-model="$ctrl.formValues.RepositoryUsername" name="repository_username" placeholder="myGitUser" />
|
|
</div>
|
|
<label for="repository_password" class="col-sm-1 control-label text-left">
|
|
Password
|
|
</label>
|
|
<div class="col-sm-11 col-md-5">
|
|
<input type="password" class="form-control" ng-model="$ctrl.formValues.RepositoryPassword" name="repository_password" placeholder="myPassword" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !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"
|
|
>
|
|
<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>
|