mirror of https://github.com/portainer/portainer
105 lines
4.8 KiB
HTML
105 lines
4.8 KiB
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 -->
|
|
|
|
<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" value="$ctrl.formValues.Groups" on-change="($ctrl.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>
|
|
<p class="col-sm-12 vertical-center help-block small text-warning" ng-if="$ctrl.formValues.DeploymentType === undefined">
|
|
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> There are no available deployment types when there is more than one type of environment in your edge
|
|
group selection (e.g. Kubernetes and Docker environments). Please select edge groups that have environments of the same type.
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|