2020-05-14 02:14:28 +00:00
< 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" >
2020-08-07 04:50:56 +00:00
No Edge groups are available. Head over to the < a ui-sref = "edge.groups" > Edge groups view< / a > to create one.
2020-05-14 02:14:28 +00:00
< / 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 >
