mirror of
https://github.com/portainer/portainer.git
synced 2025-07-19 05:19:39 +02:00
233 lines
11 KiB
HTML
233 lines
11 KiB
HTML
<rd-header>
|
|
<rd-header-title title-text="Create stack"></rd-header-title>
|
|
<rd-header-content> <a ui-sref="docker.stacks">Stacks</a> > Add stack </rd-header-content>
|
|
</rd-header>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<rd-widget>
|
|
<rd-widget-body>
|
|
<form class="form-horizontal" name="createStackForm">
|
|
<!-- 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="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" ng-if="state.StackType === 1">
|
|
This stack will be deployed using the equivalent of the <code>docker stack deploy</code> command.
|
|
</span>
|
|
<div class="col-sm-12 text-muted small" ng-if="state.StackType === 2 && composeSyntaxMaxVersion == 2">
|
|
<div style="margin-bottom: 7px;">
|
|
This stack will be deployed using the equivalent of <code>docker-compose</code>. Only Compose file format version <b>2</b> is supported at the moment.
|
|
</div>
|
|
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
|
|
Note: Due to a limitation of libcompose, the name of the stack will be standardized to remove all special characters and uppercase letters.
|
|
</div>
|
|
<span class="col-sm-12 text-muted small" ng-if="state.StackType === 2 && composeSyntaxMaxVersion > 2">
|
|
This stack will be deployed using <code>docker-compose</code>.
|
|
</span>
|
|
</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="state.Method" value="editor" />
|
|
<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="state.Method" value="upload" />
|
|
<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="state.Method" value="repository" />
|
|
<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="state.Method" value="template" />
|
|
<label for="method_template">
|
|
<div class="boxselector_header">
|
|
<i class="fa fa-rocket" aria-hidden="true" style="margin-right: 2px;"></i>
|
|
Custom template
|
|
</div>
|
|
<p>Use a custom template</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !build-method -->
|
|
<!-- web-editor -->
|
|
<div ng-show="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 class="col-sm-12" ng-if="state.editorYamlValidationError"
|
|
><span class="text-danger small">{{ state.editorYamlValidationError }}</span></div
|
|
>
|
|
</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"
|
|
on-change="(editorUpdate)"
|
|
></code-editor>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !web-editor -->
|
|
<!-- upload -->
|
|
<div ng-show="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 class="col-sm-12" ng-if="state.uploadYamlValidationError"
|
|
><span class="text-danger small">{{ state.uploadYamlValidationError }}</span></div
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<button type="button" class="btn btn-sm btn-primary" ngf-select="uploadFile($file)">Select file</button>
|
|
<span style="margin-left: 5px;">
|
|
{{ formValues.StackFile.name }}
|
|
<i class="fa fa-times red-icon" ng-if="!formValues.StackFile" aria-hidden="true"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !upload -->
|
|
<git-form
|
|
ng-if="state.Method === 'repository'"
|
|
model="formValues"
|
|
on-change="(onChangeFormValues)"
|
|
additional-file="true"
|
|
auto-update="true"
|
|
show-auth-explanation="true"
|
|
></git-form>
|
|
<!-- custom-template -->
|
|
<div ng-show="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
|
|
ng-if="templates.length"
|
|
class="form-control"
|
|
ng-model="selectedTemplate"
|
|
ng-options="template as template.label for template in templates"
|
|
ng-change="onChangeTemplate(selectedTemplate)"
|
|
>
|
|
<option value="" label="Select a Custom template" disabled selected="selected"> </option>
|
|
</select>
|
|
<span ng-if="!templates.length">
|
|
No custom templates are available. Head over to the <a ui-sref="docker.templates.custom.new">custom template view</a> to create one.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- description -->
|
|
<div ng-if="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="selectedTemplate.note"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !description -->
|
|
<!-- editor -->
|
|
<div ng-if="selectedTemplate && formValues.StackFileContent">
|
|
<div class="col-sm-12 form-section-title">
|
|
Web editor
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12" ng-if="state.editorYamlValidationError"
|
|
><span class="text-danger small">{{ state.editorYamlValidationError }}</span></div
|
|
>
|
|
</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="formValues.StackFileContent"
|
|
on-change="(editorUpdate)"
|
|
></code-editor>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !custom-template -->
|
|
<!-- environment-variables -->
|
|
<environment-variables-panel ng-model="formValues.Env" explanation="These values will be used as substitutions in the stack file" on-change="(handleEnvVarChange)">
|
|
</environment-variables-panel>
|
|
<!-- !environment-variables -->
|
|
<por-access-control-form form-data="formValues.AccessControlData"></por-access-control-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="state.actionInProgress
|
|
|| !createStackForm.$valid
|
|
|| (state.Method === 'editor' && (!formValues.StackFileContent || state.editorYamlValidationError))
|
|
|| (state.Method === 'upload' && (!formValues.StackFile || state.uploadYamlValidationError))
|
|
|| (state.Method === 'template' && (!formValues.StackFileContent || !selectedTemplate || state.editorYamlValidationError))
|
|
|| (state.Method === 'repository' && ((!formValues.RepositoryURL || !formValues.ComposeFilePathInRepository) || (formValues.RepositoryAuthentication && !formValues.RepositoryPassword)))
|
|
|| !formValues.Name"
|
|
ng-click="deployStack()"
|
|
button-spinner="state.actionInProgress"
|
|
>
|
|
<span ng-hide="state.actionInProgress">Deploy the stack</span>
|
|
<span ng-show="state.actionInProgress">Deployment in progress...</span>
|
|
</button>
|
|
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- !actions -->
|
|
</form>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
</div>
|