refactor(k8s/deploy): use components (#5417) [EE-141

pull/5398/head
Chaim Lev-Ari 2021-08-18 14:56:13 +03:00 committed by GitHub
parent 91653f9c36
commit 141ee11799
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 217 additions and 239 deletions

View File

@ -626,88 +626,6 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
margin-left: 21px;
}
.boxselector_wrapper {
display: flex;
flex-flow: row wrap;
margin: 0.5rem;
}
.boxselector_wrapper > div {
flex: 1;
padding: 0.5rem;
}
.boxselector_wrapper .boxselector_header {
font-size: 14px;
margin-bottom: 5px;
font-weight: bold;
}
.boxselector_header .fa,
.fab {
font-weight: normal;
}
.boxselector_wrapper input[type='radio'] {
display: none;
}
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
cursor: pointer;
}
.boxselector_wrapper label {
font-weight: normal;
font-size: 12px;
display: block;
background: white;
border: 1px solid #333333;
border-radius: 2px;
padding: 10px 10px 0 10px;
text-align: center;
box-shadow: 0 3px 10px -2px rgba(161, 170, 166, 0.5);
position: relative;
}
.boxselector_wrapper label.boxselector_disabled {
background: #cacaca;
border-color: #787878;
color: #787878;
cursor: not-allowed;
}
.boxselector_wrapper input[type='radio']:checked + label {
background: #337ab7;
color: white;
padding-top: 2rem;
border-color: #337ab7;
}
.boxselector_wrapper input[type='radio']:checked + label::after {
color: #337ab7;
font-family: 'Font Awesome 5 Free';
border: 2px solid #337ab7;
content: '\f00c';
font-size: 16px;
font-weight: bold;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
height: 30px;
width: 30px;
line-height: 26px;
text-align: center;
border-radius: 50%;
background: white;
box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
.boxselector_wrapper {
flex-direction: column;
}
}
.visualizer_container {
display: flex;
flex-direction: row;

View File

@ -22,110 +22,24 @@
<select class="form-control" ng-model="ctrl.formValues.Namespace" ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"></select>
</div>
</div>
<!-- deploy-type -->
<div class="col-sm-12 form-section-title">
Deployment type
</div>
<div class="form-group"></div>
<div class="form-group" style="margin-bottom: 0;">
<div class="boxselector_wrapper">
<div>
<input type="radio" id="method_kubernetes" ng-model="ctrl.state.DeployType" ng-value="ctrl.ManifestDeployTypes.KUBERNETES" />
<label for="method_kubernetes">
<div class="boxselector_header">
<i class="fa fa-cubes" aria-hidden="true" style="margin-right: 2px;"></i>
Kubernetes
</div>
<p>Kubernetes manifest format</p>
</label>
</div>
<div>
<input type="radio" id="method_compose" ng-model="ctrl.state.DeployType" ng-value="ctrl.ManifestDeployTypes.COMPOSE" />
<label for="method_compose">
<div class="boxselector_header">
<i class="fab fa-docker" aria-hidden="true" style="margin-right: 2px;"></i>
Compose
</div>
<p>docker-compose format</p>
</label>
</div>
</div>
</div>
<!-- !deploy-type -->
<box-selector radio-name="deploy" ng-model="ctrl.state.DeployType" options="ctrl.deployOptions"></box-selector>
<!-- 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="build_method_git" ng-model="ctrl.state.BuildMethod" ng-value="ctrl.BuildMethods.GIT" />
<label for="build_method_git">
<div class="boxselector_header">
<i class="fab fa-github" aria-hidden="true" style="margin-right: 2px;"></i>
Git Repository
</div>
<p>Use a git repository</p>
</label>
</div>
<div>
<input type="radio" id="build_method_web_editor" ng-model="ctrl.state.BuildMethod" ng-value="ctrl.BuildMethods.WEB_EDITOR" />
<label for="build_method_web_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>
</div>
<!-- !deploy-type -->
<box-selector radio-name="method" ng-model="ctrl.state.BuildMethod" options="ctrl.methodOptions"></box-selector>
<!-- repository -->
<div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT">
<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/deployment-repository"
/>
</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>
<git-form-url-field value="ctrl.formValues.RepositoryURL" on-change="(ctrl.onRepoUrlChange)"></git-form-url-field>
<git-form-ref-field value="ctrl.formValues.RepositoryReferenceName" on-change="(ctrl.onRepoRefChange)"></git-form-ref-field>
<div class="form-group">
<span class="col-sm-12 text-muted small">
Indicate the path to the yaml file from the root of your repository.
@ -137,41 +51,21 @@
<input type="text" class="form-control" ng-model="ctrl.formValues.FilePathInRepository" id="stack_manifest_path" placeholder="deployment.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>
<git-form-auth-fieldset model="ctrl.formValues" on-change="(ctrl.onChangeFormValues)"></git-form-auth-fieldset>
</div>
<!-- !repository -->
<!-- editor -->
<div ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR">
<div class="col-sm-12 form-section-title">
Web editor
</div>
<div class="form-group">
<web-editor-form
ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR"
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>
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
@ -196,20 +90,9 @@
<a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
</p>
</span>
</div>
</editor-description>
</web-editor-form>
<div class="form-group">
<div class="col-sm-12">
<code-editor
identifier="kubernetes-deploy-editor"
placeholder="# Define or paste the content of your manifest file here"
yml="false"
value="ctrl.formValues.EditorContent"
on-change="(ctrl.editorUpdate)"
></code-editor>
</div>
</div>
</div>
<!-- !editor -->
<!-- actions -->
<div class="col-sm-12 form-section-title">

View File

@ -1,8 +1,9 @@
import angular from 'angular';
import _ from 'lodash-es';
import stripAnsi from 'strip-ansi';
import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods } from 'Kubernetes/models/deploy';
import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods } from 'Kubernetes/models/deploy';
import { buildOption } from '@/portainer/components/box-selector';
class KubernetesDeployController {
/* @ngInject */
constructor($async, $state, $window, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
@ -15,11 +16,37 @@ class KubernetesDeployController {
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
this.StackService = StackService;
this.deployOptions = [
buildOption('method_kubernetes', 'fa fa-cubes', 'Kubernetes', 'Kubernetes manifest format', KubernetesDeployManifestTypes.KUBERNETES),
buildOption('method_compose', 'fa fa-docker', 'Compose', 'docker-compose format', KubernetesDeployManifestTypes.COMPOSE),
];
this.methodOptions = [
buildOption('method_repo', 'fab fa-github', 'Git Repository', 'Use a git repository', KubernetesDeployBuildMethods.GIT),
buildOption('method_editor', 'fa fa-edit', 'Web editor', 'Use our Web editor', KubernetesDeployBuildMethods.WEB_EDITOR),
];
this.state = {
DeployType: KubernetesDeployManifestTypes.KUBERNETES,
BuildMethod: KubernetesDeployBuildMethods.GIT,
tabLogsDisabled: true,
activeTab: 0,
viewReady: false,
isEditorDirty: false,
};
this.formValues = {};
this.ManifestDeployTypes = KubernetesDeployManifestTypes;
this.BuildMethods = KubernetesDeployBuildMethods;
this.endpointId = this.EndpointProvider.endpointID();
this.onInit = this.onInit.bind(this);
this.deployAsync = this.deployAsync.bind(this);
this.editorUpdate = this.editorUpdate.bind(this);
this.editorUpdateAsync = this.editorUpdateAsync.bind(this);
this.onChangeFileContent = this.onChangeFileContent.bind(this);
this.getNamespacesAsync = this.getNamespacesAsync.bind(this);
this.onChangeFormValues = this.onChangeFormValues.bind(this);
this.onRepoUrlChange = this.onRepoUrlChange.bind(this);
this.onRepoRefChange = this.onRepoRefChange.bind(this);
}
disableDeploy() {
@ -33,13 +60,24 @@ class KubernetesDeployController {
return isGitFormInvalid || isWebEditorInvalid || _.isEmpty(this.formValues.Namespace) || this.state.actionInProgress;
}
async editorUpdateAsync(cm) {
this.formValues.EditorContent = cm.getValue();
this.state.isEditorDirty = true;
onChangeFormValues(values) {
this.formValues = {
...this.formValues,
...values,
};
}
editorUpdate(cm) {
return this.$async(this.editorUpdateAsync, cm);
onRepoUrlChange(value) {
this.onChangeFormValues({ RepositoryURL: value });
}
onRepoRefChange(value) {
this.onChangeFormValues({ RepositoryReferenceName: value });
}
onChangeFileContent(value) {
this.formValues.EditorContent = value;
this.state.isEditorDirty = true;
}
displayErrorLog(log) {
@ -120,20 +158,6 @@ class KubernetesDeployController {
}
}
async onInit() {
this.state = {
DeployType: KubernetesDeployManifestTypes.KUBERNETES,
BuildMethod: KubernetesDeployBuildMethods.GIT,
tabLogsDisabled: true,
activeTab: 0,
viewReady: false,
isEditorDirty: false,
};
this.formValues = {};
this.ManifestDeployTypes = KubernetesDeployManifestTypes;
this.BuildMethods = KubernetesDeployBuildMethods;
this.endpointId = this.EndpointProvider.endpointID();
await this.getNamespaces();
this.state.viewReady = true;

View File

@ -0,0 +1,10 @@
<div class="box-selector-item">
<input type="radio" name="{{ $ctrl.radioName }}" id="{{ $ctrl.option.id }}" ng-checked="$ctrl.isChecked($ctrl.option.value)" ng-value="$ctrl.option.value" />
<label for="{{ $ctrl.option.id }}" ng-click="$ctrl.onChange($ctrl.option.value)">
<div class="boxselector_header">
<i ng-class="$ctrl.option.icon" aria-hidden="true" style="margin-right: 2px;"></i>
{{ $ctrl.option.label }}
</div>
<p ng-if="$ctrl.option.description">{{ $ctrl.option.description }}</p>
</label>
</div>

View File

@ -0,0 +1,11 @@
import angular from 'angular';
angular.module('portainer.app').component('boxSelectorItem', {
templateUrl: './box-selector-item.html',
bindings: {
radioName: '@',
isChecked: '<',
option: '<',
onChange: '<',
},
});

View File

@ -0,0 +1,17 @@
export default class BoxSelectorController {
constructor() {
this.isChecked = this.isChecked.bind(this);
this.change = this.change.bind(this);
}
change(value) {
this.ngModel = value;
if (this.onChange) {
this.onChange(value);
}
}
isChecked(value) {
return this.ngModel === value;
}
}

View File

@ -0,0 +1,82 @@
.boxselector_wrapper {
display: flex;
flex-flow: row wrap;
margin: 0.5rem;
}
.boxselector_wrapper > div,
.boxselector_wrapper box-selector-item {
flex: 1;
padding: 0.5rem;
}
.boxselector_wrapper .boxselector_header {
font-size: 14px;
margin-bottom: 5px;
font-weight: bold;
}
.boxselector_header .fa,
.fab {
font-weight: normal;
}
.boxselector_wrapper input[type='radio'] {
display: none;
}
.boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
cursor: pointer;
}
.boxselector_wrapper label {
font-weight: normal;
font-size: 12px;
display: block;
background: white;
border: 1px solid #333333;
border-radius: 2px;
padding: 10px 10px 0 10px;
text-align: center;
box-shadow: 0 3px 10px -2px rgba(161, 170, 166, 0.5);
position: relative;
}
.boxselector_wrapper label.boxselector_disabled {
background: #cacaca;
border-color: #787878;
color: #787878;
cursor: not-allowed;
}
.boxselector_wrapper input[type='radio']:checked + label {
background: #337ab7;
color: white;
padding-top: 2rem;
border-color: #337ab7;
}
.boxselector_wrapper input[type='radio']:checked + label::after {
color: #337ab7;
font-family: 'Font Awesome 5 Free';
border: 2px solid #337ab7;
content: '\f00c';
font-size: 16px;
font-weight: bold;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
height: 30px;
width: 30px;
line-height: 26px;
text-align: center;
border-radius: 50%;
background: white;
box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
.boxselector_wrapper {
flex-direction: column;
}
}

View File

@ -0,0 +1,13 @@
<div class="form-group"></div>
<div class="form-group">
<div class="boxselector_wrapper">
<box-selector-item
ng-repeat="option in $ctrl.options"
radio-name="{{ $ctrl.radioName }}"
option="option"
on-change="($ctrl.change)"
is-checked="$ctrl.isChecked"
></box-selector-item>
</div>
</div>

View File

@ -0,0 +1,20 @@
import angular from 'angular';
import './box-selector.css';
import controller from './box-selector.controller';
angular.module('portainer.app').component('boxSelector', {
templateUrl: './box-selector.html',
controller,
bindings: {
radioName: '@',
ngModel: '=',
options: '<',
onChange: '<',
},
});
export function buildOption(id, icon, label, description, value) {
return { id, icon, label, description, value };
}