github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feature(ui): ui improvements kube config add from EE-3471 (#7341)

pull/7336/head
Prabhat Khera 2022-07-28 11:17:32 +12:00 committed by GitHub
parent aa830a0e58
commit e779939ae1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
View File

@ -4,20 +4,20 @@
<div class="form-group" ng-if="$ctrl.isCreation"> <div class="form-group" ng-if="$ctrl.isCreation">
<div class="col-sm-12"> <div class="col-sm-12">
<p> <p>
<a class="small interactive" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()"> <a class="small interactive vertical-center" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
<i class="fa fa-list-ol space-right" aria-hidden="true"></i> Advanced mode <pr-icon icon="'list'" feather="true"></pr-icon> Advanced mode
</a> </a>
<a class="small interactive" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()"> <a class="small interactive vertical-center" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
<i class="fa fa-edit space-right" aria-hidden="true"></i> Simple mode <pr-icon icon="'edit'" feather="true"></pr-icon> Simple mode
</a> </a>
</p> </p>
</div> </div>
<div class="col-sm-12 small text-muted" ng-if="$ctrl.formValues.IsSimple"> <div class="col-sm-12 small text-muted vertical-center" ng-if="$ctrl.formValues.IsSimple">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'alert-circle'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
Switch to advanced mode to copy and paste multiple key/values Switch to advanced mode to copy and paste multiple key/values
</div> </div>
<div class="col-sm-12 small text-muted" ng-if="!$ctrl.formValues.IsSimple"> <div class="col-sm-12 small text-muted vertical-center" ng-if="!$ctrl.formValues.IsSimple">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'alert-circle'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
Generate a configuration entry per line, use YAML format Generate a configuration entry per line, use YAML format
</div> </div>
</div> </div>
@ -25,18 +25,18 @@
<div class="form-group" ng-if="$ctrl.formValues.IsSimple"> <div class="form-group" ng-if="$ctrl.formValues.IsSimple">
<div class="col-sm-12"> <div class="col-sm-12">
<button type="button" class="btn btn-sm btn-default" style="margin-left: 0" ng-click="$ctrl.addEntry()" data-cy="k8sConfigCreate-createEntryButton"> <button type="button" class="btn btn-sm btn-default" style="margin-left: 0" ng-click="$ctrl.addEntry()" data-cy="k8sConfigCreate-createEntryButton">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Create entry <pr-icon icon="'plus'" feather="true" class="vertical-center"></pr-icon> Create entry
</button> </button>
<button type="button" class="btn btn-sm btn-default" ngf-select="$ctrl.addEntryFromFile($file)" style="margin-left: 0" data-cy="k8sConfigCreate-createConfigsFromFileButton"> <button type="button" class="btn btn-sm btn-default" ngf-select="$ctrl.addEntryFromFile($file)" style="margin-left: 0" data-cy="k8sConfigCreate-createConfigsFromFileButton">
<i class="fa fa-file-upload" aria-hidden="true"></i> Create key/value from file <pr-icon icon="'upload'" feather="true" class="vertical-center"></pr-icon> Create key/value from file
</button> </button>
</div> </div>
</div> </div>
<div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple"> <div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple">
<div class="form-group"> <div class="form-group">
<label for="configuration_data_key_{{ index }}" class="col-sm-1 control-label text-left">Key</label> <label for="configuration_data_key_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Key</label>
<div class="col-sm-11"> <div class="col-sm-8">
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -49,7 +49,7 @@
/> />
</div> </div>
<div <div
class="col-sm-11 small text-warning" class="col-sm-11 small text-muted"
style="margin-top: 5px" style="margin-top: 5px"
ng-show=" ng-show="
kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid || kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
@ -58,18 +58,22 @@
" "
> >
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error"> <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p> <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required. </p>
</ng-messages> </ng-messages>
<p ng-if="$ctrl.state.duplicateKeys[index] !== undefined"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is already defined.</p> <div>
<p ng-if="$ctrl.state.invalidKeys[index]" <p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'</p <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is already defined.
> </p>
</div>
<p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'
</p>
</div> </div>
</div> </div>
<div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary"> <div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
<label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label> <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
<div class="col-sm-11"> <div class="col-sm-8">
<textarea <textarea
class="form-control" class="form-control"
rows="5" rows="5"
@ -79,35 +83,35 @@
required required
></textarea> ></textarea>
</div> </div>
<div class="col-sm-11 small text-warning" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid"> <div class="col-sm-11 small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error"> <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p> <p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
</ng-messages> </ng-messages>
</div> </div>
</div> </div>
<div class="form-group" ng-if="$ctrl.formValues.IsSimple && entry.IsBinary"> <div class="form-group" ng-if="$ctrl.formValues.IsSimple && entry.IsBinary">
<label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label> <label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
<div class="col-sm-11 control-label small text-muted text-left" <div class="col-sm-8 control-label small text-muted text-left"
>Binary data <portainer-tooltip message="'This key holds binary data and cannot be displayed.'"></portainer-tooltip >Binary data <portainer-tooltip message="'This key holds binary data and cannot be displayed.'"></portainer-tooltip
></div> ></div>
</div> </div>
<div class="form-group" ng-if="$ctrl.formValues.IsSimple"> <div class="form-group" ng-if="$ctrl.formValues.IsSimple">
<div class="col-sm-1"></div> <div class="col-sm-3 col-lg-2"></div>
<div class="col-sm-11"> <div class="col-sm-8">
<button <button
type="button" type="button"
class="btn btn-sm btn-danger space-right" class="btn btn-sm btn-dangerlight !ml-0"
style="margin-left: 0" style="margin-left: 0"
ng-disabled="entry.Used" ng-disabled="entry.Used"
ng-click="$ctrl.removeEntry(index, entry)" ng-click="$ctrl.removeEntry(index, entry)"
data-cy="k8sConfigDetail-removeEntryButton{{ index }}" data-cy="k8sConfigDetail-removeEntryButton{{ index }}"
> >
<i class="fa fa-trash-alt" aria-hidden="true"></i> Remove entry <pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove entry
</button> </button>
<span class="small text-muted" ng-if="entry.Used"> <span class="small text-muted" ng-if="entry.Used">
<i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i> <pr-icon icon="'alert-circle'" feather="true" mode="'primary'"></pr-icon>
This key is currently used by one or more applications This key is currently used by one or more applications
</span> </span>
</div> </div>

1
app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationDataController.js
View File

@ -1,3 +1,4 @@
import { Buffer } from 'buffer';
import angular from 'angular'; import angular from 'angular';
import _ from 'lodash-es'; import _ from 'lodash-es';
import chardet from 'chardet'; import chardet from 'chardet';

45
app/kubernetes/views/configurations/create/createConfiguration.html
View File

@ -15,8 +15,8 @@
<form class="form-horizontal" name="kubernetesConfigurationCreationForm" autocomplete="off"> <form class="form-horizontal" name="kubernetesConfigurationCreationForm" autocomplete="off">
<!-- name --> <!-- name -->
<div class="form-group"> <div class="form-group">
<label for="configuration_name" class="col-sm-1 control-label text-left">Name</label> <label for="configuration_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<div class="col-sm-11"> <div class="col-sm-8">
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -32,16 +32,16 @@
</div> </div>
</div> </div>
<div class="form-group" ng-show="kubernetesConfigurationCreationForm.configuration_name.$invalid || ctrl.state.alreadyExist"> <div class="form-group" ng-show="kubernetesConfigurationCreationForm.configuration_name.$invalid || ctrl.state.alreadyExist">
<div class="col-sm-12 small text-warning"> <div class="col-sm-12 small text-muted">
<div ng-messages="kubernetesConfigurationCreationForm.configuration_name.$error"> <div ng-messages="kubernetesConfigurationCreationForm.configuration_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p> <p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
<p ng-message="pattern" <p ng-message="pattern" class="vertical-center"
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field must consist of lower case alphanumeric characters, '-' or '.', and contain at most 63 ><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon> This field must consist of lower case alphanumeric
characters, and must start and end with an alphanumeric character.</p characters, '-' or '.', and contain at most 63 characters, and must start and end with an alphanumeric character.</p
> >
</div> </div>
<p ng-if="ctrl.state.alreadyExist" <p ng-if="ctrl.state.alreadyExist" class="vertical-center"
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A configuration with the same name already exists inside the selected namespace.</p ><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> A configuration with the same name already exists inside the selected namespace.</p
> >
</div> </div>
</div> </div>
@ -51,8 +51,8 @@
<!-- resource-pool --> <!-- resource-pool -->
<div class="form-group" ng-if="ctrl.formValues.ResourcePool"> <div class="form-group" ng-if="ctrl.formValues.ResourcePool">
<label for="resource-pool-selector" class="col-sm-1 control-label text-left">Namespace</label> <label for="resource-pool-selector" class="col-sm-3 col-lg-2 control-label text-left">Namespace</label>
<div class="col-sm-11"> <div class="col-sm-8">
<select <select
class="form-control" class="form-control"
id="resource-pool-selector" id="resource-pool-selector"
@ -64,19 +64,20 @@
</div> </div>
</div> </div>
<div class="form-group" ng-if="ctrl.state.resourcePoolHasQuota && ctrl.resourceQuotaCapacityExceeded()"> <div class="form-group" ng-if="ctrl.state.resourcePoolHasQuota && ctrl.resourceQuotaCapacityExceeded()">
<div class="col-sm-12 small text-warning"> <div class="col-sm-12 small text-muted vertical-center">
<i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
This namespace has exhausted its resource capacity and you will not be able to deploy the configuration. Contact your administrator to expand the capacity of the This namespace has exhausted its resource capacity and you will not be able to deploy the configuration. Contact your administrator to expand the capacity of the
namespace. namespace.
</div> </div>
</div> </div>
<div class="form-group" ng-if="!ctrl.formValues.ResourcePool"> <div class="form-group" ng-if="!ctrl.formValues.ResourcePool">
<div class="col-sm-12 small text-muted"> <div class="col-sm-12 small text-muted vertical-center">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <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. You do not have access to any namespace. Contact your administrator to get access to a namespace.
</div> </div>
</div> </div>
<!-- !resource-pool --> <!-- !resource-pool -->
<div ng-if="ctrl.formValues.ResourcePool"> <div ng-if="ctrl.formValues.ResourcePool">
<div class="col-sm-12 form-section-title"> Configuration type </div> <div class="col-sm-12 form-section-title"> Configuration type </div>
@ -126,21 +127,21 @@
is-creation="true" is-creation="true"
is-editor-dirty="ctrl.state.isEditorDirty" is-editor-dirty="ctrl.state.isEditorDirty"
></kubernetes-configuration-data> ></kubernetes-configuration-data>
<!-- summary -->
<kubernetes-summary-view
ng-if="!(!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress)"
form-values="ctrl.formValues"
></kubernetes-summary-view>
</div> </div>
<!-- summary -->
<kubernetes-summary-view
ng-if="!(!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress)"
form-values="ctrl.formValues"
></kubernetes-summary-view>
<!-- actions --> <!-- actions -->
<div class="col-sm-12 form-section-title" style="margin-top: 10px"> Actions </div> <div class="col-sm-12 form-section-title" style="margin-top: 10px"> Actions </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary btn-sm !ml-0"
ng-disabled="!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress || !ctrl.formValues.ResourcePool" ng-disabled="!kubernetesConfigurationCreationForm.$valid || !ctrl.isFormValid() || ctrl.state.actionInProgress || !ctrl.formValues.ResourcePool"
ng-click="ctrl.createConfiguration()" ng-click="ctrl.createConfiguration()"
button-spinner="ctrl.state.actionInProgress" button-spinner="ctrl.state.actionInProgress"