fix issue from QA testing and added previous button

This commit is contained in:
waysonwei
2021-09-09 12:51:16 +12:00
parent 451fe3f192
commit 54b4e4e1fa
10 changed files with 121 additions and 87 deletions
@@ -9,29 +9,30 @@ export default class WizardAciController {
this.NameValidator = NameValidator;
}
async addAciEndpoint() {
const { name, azureApplicationId, azureTenantId, azureAuthenticationKey } = this.formValues;
const groupId = 1;
const tagIds = [];
addAciEndpoint() {
return this.$async(async () => {
const { name, azureApplicationId, azureTenantId, azureAuthenticationKey } = this.formValues;
const groupId = 1;
const tagIds = [];
try {
this.state.actionInProgress = true;
// Check name is duplicated or not
let nameUsed = await this.NameValidator.validateEnvironmentName(name);
if (nameUsed) {
this.Notifications.error('Failure', true, 'This name is been used, please try another one');
return;
try {
this.state.actionInProgress = true;
// Check name is duplicated or not
let nameUsed = await this.NameValidator.validateEnvironmentName(name);
if (nameUsed) {
this.Notifications.error('Failure', true, 'This name is been used, please try another one');
return;
}
await this.EndpointService.createAzureEndpoint(name, azureApplicationId, azureTenantId, azureAuthenticationKey, groupId, tagIds);
this.Notifications.success('Environment connected', name);
this.clearForm();
this.onUpdate();
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to connect your environment');
this.state.actionInProgress = false;
}
await this.EndpointService.createAzureEndpoint(name, azureApplicationId, azureTenantId, azureAuthenticationKey, groupId, tagIds);
this.Notifications.success('Environment connected', name);
this.clearForm();
this.onUpdate();
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to connect your environment');
this.state.actionInProgress = false;
}
this.onAnalytics('aci-api');
this.onAnalytics('aci-api');
});
}
clearForm() {
@@ -55,7 +55,7 @@
<button
type="submit"
class="btn btn-primary btn-sm wizard-connect-button"
ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.azureApplicationId || !$ctrl.formValues.azureTenantId || !$ctrl.formValues.azureAuthenticationKey"
ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.azureApplicationId || !$ctrl.formValues.azureTenantId || !$ctrl.formValues.azureAuthenticationKey || $ctrl.state.actionInProgress"
ng-click="$ctrl.addAciEndpoint()"
button-spinner="$ctrl.state.actionInProgress"
>
@@ -40,43 +40,45 @@ export default class WizardDockerController {
}
// connect docker environment
async connectEnvironment(type) {
const name = this.formValues.name;
const url = this.$filter('stripprotocol')(this.formValues.url);
const publicUrl = url.split(':')[0];
const overrideUrl = this.formValues.socketPath;
const groupId = this.formValues.groupId;
const tagIds = this.formValues.tagIds;
const securityData = this.formValues.securityFormData;
const socketUrl = this.formValues.overrideSocket ? overrideUrl : url;
connectEnvironment(type) {
return this.$async(async () => {
const name = this.formValues.name;
const url = this.$filter('stripprotocol')(this.formValues.url);
const publicUrl = url.split(':')[0];
const overrideUrl = this.formValues.socketPath;
const groupId = this.formValues.groupId;
const tagIds = this.formValues.tagIds;
const securityData = this.formValues.securityFormData;
const socketUrl = this.formValues.overrideSocket ? overrideUrl : url;
var creationType = null;
var creationType = null;
if (type === 'agent') {
creationType = PortainerEndpointCreationTypes.AgentEnvironment;
}
if (type === 'agent') {
creationType = PortainerEndpointCreationTypes.AgentEnvironment;
}
if (type === 'api') {
creationType = PortainerEndpointCreationTypes.LocalDockerEnvironment;
}
if (type === 'api') {
creationType = PortainerEndpointCreationTypes.LocalDockerEnvironment;
}
// Check name is duplicated or not
const nameUsed = await this.NameValidator.validateEnvironmentName(name);
if (nameUsed) {
this.Notifications.error('Failure', true, 'This name is been used, please try another one');
return;
}
switch (type) {
case 'agent':
await this.addDockerAgentEndpoint(name, creationType, url, publicUrl, groupId, tagIds);
break;
case 'api':
await this.addDockerApiEndpoint(name, creationType, url, publicUrl, groupId, tagIds, securityData);
break;
case 'socket':
await this.addDockerLocalEndpoint(name, socketUrl, publicUrl, groupId, tagIds);
break;
}
// Check name is duplicated or not
const nameUsed = await this.NameValidator.validateEnvironmentName(name);
if (nameUsed) {
this.Notifications.error('Failure', true, 'This name is been used, please try another one');
return;
}
switch (type) {
case 'agent':
await this.addDockerAgentEndpoint(name, creationType, url, publicUrl, groupId, tagIds);
break;
case 'api':
await this.addDockerApiEndpoint(name, creationType, url, publicUrl, groupId, tagIds, securityData);
break;
case 'socket':
await this.addDockerLocalEndpoint(name, socketUrl, publicUrl, groupId, tagIds);
break;
}
});
}
// Docker Agent Endpoint
@@ -138,9 +138,9 @@
ng-if="$ctrl.state.endpointType === 'agent'"
type="submit"
class="btn btn-primary btn-sm wizard-connect-button"
ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url"
ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url || $ctrl.state.actionInProgress"
ng-click="$ctrl.connectEnvironment('agent')"
button-spinner="state.actionInProgress"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i>Connect </span>
<span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
@@ -149,9 +149,9 @@
ng-if="$ctrl.state.endpointType === 'api'"
type="submit"
class="btn btn-primary btn-sm wizard-connect-button"
ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url"
ng-disabled="!$ctrl.formValues.name || !$ctrl.formValues.url || $ctrl.state.actionInProgress"
ng-click="$ctrl.connectEnvironment('api')"
button-spinner="state.actionInProgress"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i>Connect </span>
<span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
@@ -160,9 +160,9 @@
ng-if="$ctrl.state.endpointType === 'socket'"
type="submit"
class="btn btn-primary btn-sm wizard-connect-button"
ng-disabled="!$ctrl.formValues.name"
ng-disabled="!$ctrl.formValues.name || $ctrl.state.actionInProgress"
ng-click="$ctrl.connectEnvironment('socket')"
button-spinner="state.actionInProgress"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i>Connect </span>
<span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
@@ -14,28 +14,30 @@ export default class WizardKubernetesController {
this.NameValidator = NameValidator;
}
async addKubernetesAgent() {
const name = this.state.formValues.name;
const groupId = 1;
const tagIds = [];
const url = this.$filter('stripprotocol')(this.state.formValues.url);
const publicUrl = url.split(':')[0];
const creationType = PortainerEndpointCreationTypes.AgentEnvironment;
const tls = true;
const tlsSkipVerify = true;
const tlsSkipClientVerify = true;
const tlsCaFile = null;
const tlsCertFile = null;
const tlsKeyFile = null;
addKubernetesAgent() {
return this.$async(async () => {
const name = this.state.formValues.name;
const groupId = 1;
const tagIds = [];
const url = this.$filter('stripprotocol')(this.state.formValues.url);
const publicUrl = url.split(':')[0];
const creationType = PortainerEndpointCreationTypes.AgentEnvironment;
const tls = true;
const tlsSkipVerify = true;
const tlsSkipClientVerify = true;
const tlsCaFile = null;
const tlsCertFile = null;
const tlsKeyFile = null;
// Check name is duplicated or not
let nameUsed = await this.NameValidator.validateEnvironmentName(name);
if (nameUsed) {
this.Notifications.error('Failure', true, 'This name is been used, please try another one');
return;
}
this.addRemoteEndpoint(name, creationType, url, publicUrl, groupId, tagIds, tls, tlsSkipVerify, tlsSkipClientVerify, tlsCaFile, tlsCertFile, tlsKeyFile);
this.onAnalytics('kubernetes-agent');
// Check name is duplicated or not
let nameUsed = await this.NameValidator.validateEnvironmentName(name);
if (nameUsed) {
this.Notifications.error('Failure', true, 'This name is been used, please try another one');
return;
}
await this.addRemoteEndpoint(name, creationType, url, publicUrl, groupId, tagIds, tls, tlsSkipVerify, tlsSkipClientVerify, tlsCaFile, tlsCertFile, tlsKeyFile);
this.onAnalytics('kubernetes-agent');
});
}
async addRemoteEndpoint(name, creationType, url, publicURL, groupId, tagIds, tls, tlsSkipVerify, tlsSkipClientVerify, tlsCaFile, tlsCertFile, tlsKeyFile) {
@@ -53,9 +53,9 @@
<button
type="submit"
class="btn btn-primary btn-sm wizard-connect-button"
ng-disabled="!$ctrl.state.formValues.name || !$ctrl.state.formValues.url"
ng-disabled="!$ctrl.state.formValues.name || !$ctrl.state.formValues.url || $ctrl.state.actionInProgress"
ng-click="$ctrl.addKubernetesAgent()"
button-spinner="state.actionInProgress"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress"><i class="fa fa-plug" style="margin-right: 5px;"></i> Connect </span>
<span ng-show="$ctrl.state.actionInProgress">Connecting environment...</span>
@@ -44,6 +44,14 @@ export default class WizardEndpointsController {
this.state.currentStep++;
}
previousStep() {
this.state.section = this.state.selections[this.state.currentStep - 2].endpoint;
this.state.selections[this.state.currentStep - 2].stage = 'active';
this.state.selections[this.state.currentStep - 1].stage = '';
this.state.nextStep = 'Next Step';
this.state.currentStep--;
}
nextStep() {
if (this.state.currentStep >= this.state.maxStep - 1) {
this.state.nextStep = 'Finish';
@@ -137,6 +145,7 @@ export default class WizardEndpointsController {
kubernetesActive: '',
aciActive: '',
maxStep: '',
previousStep: 'Previous',
nextStep: 'Next Step',
selections: [],
analytics: {
@@ -62,6 +62,15 @@
border-top: 1px solid #777;
}
.next-btn {
float: right;
}
.previous-btn {
float: left;
margin-left: 0px !important;
}
.wizard-wrapper {
display: grid;
grid-template-columns: 1fr 400px;
@@ -23,7 +23,16 @@
</div>
<div class="wizard-step-action">
<button ng-click="$ctrl.nextStep()" ng-show="$ctrl.state.currentStep !== 0" type="submit" class="btn btn-primary btn-sm">
<button
ng-click="$ctrl.previousStep()"
ng-show="$ctrl.state.currentStep !== 0"
type="submit"
class="btn btn-primary btn-sm previous-btn"
ng-disabled="$ctrl.state.currentStep === 1"
>
<i class="fas fa-arrow-left space-right"></i>{{ $ctrl.state.previousStep }}
</button>
<button ng-click="$ctrl.nextStep()" ng-show="$ctrl.state.currentStep !== 0" type="submit" class="btn btn-primary btn-sm next-btn">
{{ $ctrl.state.nextStep }} <i class="fas fa-arrow-right space-left"></i
></button>
</div>
@@ -1,3 +1,5 @@
import { PortainerEndpointCreationTypes } from 'Portainer/models/endpoint/models';
export default class WizardViewController {
/* @ngInject */
constructor($async, $state, EndpointService, $analytics) {
@@ -80,13 +82,13 @@ export default class WizardViewController {
}
} else {
const addedLocalEndpoint = endpoints.value[0];
if (addedLocalEndpoint.Type === 1) {
if (addedLocalEndpoint.Type === PortainerEndpointCreationTypes.LocalDockerEnvironment) {
this.state.endpoint.added = true;
this.state.endpoint.connected = 'docker';
this.state.local.icon = 'fab fa-docker';
}
if (addedLocalEndpoint.Type === 5) {
if (addedLocalEndpoint.Type === PortainerEndpointCreationTypes.LocalKubernetesEnvironment) {
this.state.endpoint.added = true;
this.state.endpoint.connected = 'kubernetes';
this.state.local.icon = 'fas fa-dharmachakra';