portainer/app/kubernetes/views/deploy/deploy.html

208 lines
11 KiB
HTML

<page-header ng-if="ctrl.state.viewReady" title="'Advanced deployment'" breadcrumbs="['Deploy Kubernetes resources']" reload="true"></page-header>
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady">
<kubernetes-feedback-panel></kubernetes-feedback-panel>
<div class="row kubernetes-deploy">
<div class="col-sm-12">
<rd-widget>
<rd-widget-body>
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
<uib-tab index="0">
<uib-tab-heading> <pr-icon icon="'code'" feather="true"></pr-icon> Deploy </uib-tab-heading>
<div class="col-sm-12 form-section-title"> Namespace </div>
<form class="form-horizontal mt-3" name="deploymentForm">
<div class="form-group" ng-if="ctrl.formValues.Namespace">
<label for="target_node" class="col-lg-2 col-sm-3 control-label text-left">Namespace</label>
<div class="col-sm-8">
<select
ng-disabled="ctrl.formValues.namespace_toggle"
class="form-control"
ng-model="ctrl.formValues.Namespace"
ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"
></select>
</div>
</div>
<div class="form-group" ng-if="ctrl.formValues.Namespace">
<label for="toggle_logo" class="col-lg-2 col-sm-3 control-label text-left">
Use namespace(s) specified from manifest
<portainer-tooltip message="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'">
</portainer-tooltip>
</label>
<div class="col-sm-8 vertical-center pt-3">
<label class="switch">
<input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" />
<span class="slider round"></span>
</label>
<!-- <span class="ml-2 mb-1 switch-values" ng-if="ctrl.formValues.namespace_toggle">Yes</span>
<span class="ml-2 mb-1 switch-values" ng-if="!ctrl.formValues.namespace_toggle">No</span> -->
</div>
</div>
<div class="form-group" ng-if="!ctrl.formValues.Namespace">
<div class="col-sm-12 small text-muted">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
You do not have access to any namespace. Contact your administrator to get access to a namespace.
</div>
</div>
<div class="form-group">
<label for="stack_name" class="col-lg-2 col-sm-3 control-label text-left">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" ng-model="ctrl.formValues.StackName" id="stack_name" placeholder="my-app" auto-focus />
</div>
</div>
<div class="col-sm-12 form-section-title"> Build method </div>
<box-selector
radio-name="'method'"
value="ctrl.state.BuildMethod"
options="ctrl.methodOptions"
data-cy="k8sAppDeploy-buildSelector"
on-change="(ctrl.onChangeMethod)"
></box-selector>
<div ng-if="ctrl.state.BuildMethod !== ctrl.BuildMethods.CUSTOM_TEMPLATE">
<div class="col-sm-12 form-section-title"> Deployment type </div>
<box-selector
radio-name="'deploy'"
value="ctrl.state.DeployType"
options="ctrl.deployOptions"
data-cy="k8sAppDeploy-deploymentSelector"
on-change="(ctrl.onChangeDeployType)"
></box-selector>
</div>
<!-- repository -->
<git-form
ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT"
model="ctrl.formValues"
on-change="(ctrl.onChangeFormValues)"
additional-file="true"
auto-update="true"
show-auth-explanation="true"
path-text-title="Manifest path"
path-placeholder="deployment.yml"
deploy-method="{{ ctrl.DeployMethod }}"
></git-form>
<!-- !repository -->
<div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE">
<custom-template-selector
new-template-path="kubernetes.templates.custom.new"
stack-type="3"
on-change="(ctrl.onChangeTemplateId)"
value="ctrl.state.templateId"
></custom-template-selector>
<custom-templates-variables-field
ng-if="ctrl.isTemplateVariablesEnabled && ctrl.state.template"
definitions="ctrl.state.template.Variables"
value="ctrl.formValues.Variables"
on-change="(ctrl.onChangeTemplateVariables)"
></custom-templates-variables-field>
</div>
<!-- editor -->
<div class="mt-4">
<web-editor-form
ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR || (ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId)"
identifier="kubernetes-deploy-editor"
value="ctrl.formValues.EditorContent"
on-change="(ctrl.onChangeFileContent)"
ng-required="true"
yml="true"
placeholder="# Define or paste the content of your manifest file here"
>
<editor-description>
<span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE">
<p>
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that
not all the Compose format options are supported by Kompose at the moment.
</p>
<p>
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>.
</p>
</span>
<span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.KUBERNETES">
<p>
<pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
</p>
<p>
You can get more information about Kubernetes file format in the
<a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
</p>
</span>
</editor-description>
</web-editor-form>
</div>
<!-- !editor -->
<!-- url -->
<div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.URL">
<div class="col-sm-12 form-section-title"> URL </div>
<div class="form-group">
<span class="col-sm-12 text-muted small"> Indicate the URL to the manifest. </span>
</div>
<div class="form-group">
<label for="manifest_url" class="col-sm-3 col-lg-2 control-label text-left">URL</label>
<div class="col-sm-8">
<input
type="text"
class="form-control"
ng-model="ctrl.formValues.ManifestURL"
id="manifest_url"
placeholder="https://raw.githubusercontent.com/kubernetes/website/main/content/en/examples/controllers/nginx-deployment.yaml"
data-cy="k8sAppDeploy-urlFileUrl"
/>
</div>
</div>
</div>
<!-- !url -->
<!-- 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="!deploymentForm.$valid ||ctrl.disableDeploy()"
ng-click="ctrl.deploy()"
button-spinner="ctrl.state.actionInProgress"
data-cy="k8sAppDeploy-deployButton"
analytics-on
analytics-category="kubernetes"
analytics-event="kubernetes-application-advanced-deployment"
analytics-properties="ctrl.buildAnalyticsProperties()"
>
<span ng-hide="ctrl.state.actionInProgress">Deploy</span>
<span ng-show="ctrl.state.actionInProgress">Deployment in progress...</span>
</button>
</div>
</div>
<!-- !actions -->
</form>
</uib-tab>
<uib-tab index="1" disable="ctrl.state.tabLogsDisabled">
<uib-tab-heading> <pr-icon icon="'file-text'" feather="true"></pr-icon> Logs </uib-tab-heading>
<form class="form-horizontal mt-3">
<div class="form-group" ng-if="ctrl.state.activeTab === 1">
<div class="col-sm-12">
<code-editor identifier="kubernetes-deploy-logs" read-only="true" yml="false" value="ctrl.errorLog"></code-editor>
</div>
</div>
</form>
</uib-tab>
</uib-tabset>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>