mirror of
https://github.com/portainer/portainer.git
synced 2025-07-22 14:59:41 +02:00
feat(configurations): Review UI/UX configurations (#4691)
* feat(configurations): Review UI/UX configurations * feat(configurations): fix binary secret value * fix(frontend): populate data between simple and advanced modes (#4503) * fix(configuration): parseYaml before create configuration * fix(configurations): change c to C in ConfigurationOwner * fix(application): change configuration index to configuration key in the view * fix(configuration): resolve problem in application create with configuration not overriden. * fix(configuration): fix bad import in helper Co-authored-by: Simon Meng <simon.meng@portainer.io>
This commit is contained in:
parent
46ff8a01bc
commit
41308d570d
19 changed files with 246 additions and 73 deletions
|
@ -3,13 +3,13 @@
|
|||
Data
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" ng-if="$ctrl.isCreation">
|
||||
<div class="col-sm-12">
|
||||
<p>
|
||||
<a class="small interactive" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.formValues.IsSimple = false">
|
||||
<a class="small interactive" ng-if="$ctrl.formValues.IsSimple" ng-click="$ctrl.showAdvancedMode()">
|
||||
<i class="fa fa-list-ol space-right" aria-hidden="true"></i> Advanced mode
|
||||
</a>
|
||||
<a class="small interactive" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.formValues.IsSimple = true">
|
||||
<a class="small interactive" ng-if="!$ctrl.formValues.IsSimple" ng-click="$ctrl.showSimpleMode()">
|
||||
<i class="fa fa-edit space-right" aria-hidden="true"></i> Simple mode
|
||||
</a>
|
||||
</p>
|
||||
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-if="$ctrl.formValues.IsSimple">
|
||||
<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>
|
||||
<div class="col-sm-11">
|
||||
<textarea
|
||||
|
@ -80,6 +80,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="col-sm-11 control-label small text-muted text-left"
|
||||
>Binary data <portainer-tooltip position="bottom" message="This key holds binary data and cannot be displayed."></portainer-tooltip
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-if="$ctrl.formValues.IsSimple">
|
||||
<div class="col-sm-1"></div>
|
||||
<div class="col-sm-11">
|
||||
|
|
|
@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesConfigurationData',
|
|||
bindings: {
|
||||
formValues: '=',
|
||||
isValid: '=',
|
||||
isCreation: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
import angular from 'angular';
|
||||
import _ from 'lodash-es';
|
||||
import { KubernetesConfigurationFormValuesDataEntry } from 'Kubernetes/models/configuration/formvalues';
|
||||
import chardet from 'chardet';
|
||||
import { Base64 } from 'js-base64';
|
||||
import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHelper';
|
||||
import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelper';
|
||||
import { KubernetesConfigurationFormValuesEntry } from 'Kubernetes/models/configuration/formvalues';
|
||||
|
||||
class KubernetesConfigurationDataController {
|
||||
/* @ngInject */
|
||||
|
@ -12,6 +15,8 @@ class KubernetesConfigurationDataController {
|
|||
this.editorUpdateAsync = this.editorUpdateAsync.bind(this);
|
||||
this.onFileLoad = this.onFileLoad.bind(this);
|
||||
this.onFileLoadAsync = this.onFileLoadAsync.bind(this);
|
||||
this.showSimpleMode = this.showSimpleMode.bind(this);
|
||||
this.showAdvancedMode = this.showAdvancedMode.bind(this);
|
||||
}
|
||||
|
||||
onChangeKey() {
|
||||
|
@ -20,7 +25,7 @@ class KubernetesConfigurationDataController {
|
|||
}
|
||||
|
||||
addEntry() {
|
||||
this.formValues.Data.push(new KubernetesConfigurationFormValuesDataEntry());
|
||||
this.formValues.Data.push(new KubernetesConfigurationFormValuesEntry());
|
||||
}
|
||||
|
||||
removeEntry(index) {
|
||||
|
@ -37,9 +42,20 @@ class KubernetesConfigurationDataController {
|
|||
}
|
||||
|
||||
async onFileLoadAsync(event) {
|
||||
const entry = new KubernetesConfigurationFormValuesDataEntry();
|
||||
const entry = new KubernetesConfigurationFormValuesEntry();
|
||||
const encoding = chardet.detect(Buffer.from(event.target.result));
|
||||
const decoder = new TextDecoder(encoding);
|
||||
|
||||
entry.Key = event.target.fileName;
|
||||
entry.Value = event.target.result;
|
||||
entry.IsBinary = KubernetesConfigurationHelper.isBinary(encoding);
|
||||
|
||||
if (!entry.IsBinary) {
|
||||
entry.Value = decoder.decode(event.target.result);
|
||||
} else {
|
||||
const stringValue = decoder.decode(event.target.result);
|
||||
entry.Value = Base64.encode(stringValue);
|
||||
}
|
||||
|
||||
this.formValues.Data.push(entry);
|
||||
this.onChangeKey();
|
||||
}
|
||||
|
@ -53,10 +69,20 @@ class KubernetesConfigurationDataController {
|
|||
const temporaryFileReader = new FileReader();
|
||||
temporaryFileReader.fileName = file.name;
|
||||
temporaryFileReader.onload = this.onFileLoad;
|
||||
temporaryFileReader.readAsText(file);
|
||||
temporaryFileReader.readAsArrayBuffer(file);
|
||||
}
|
||||
}
|
||||
|
||||
showSimpleMode() {
|
||||
this.formValues.IsSimple = true;
|
||||
this.formValues.Data = KubernetesConfigurationHelper.parseYaml(this.formValues);
|
||||
}
|
||||
|
||||
showAdvancedMode() {
|
||||
this.formValues.IsSimple = false;
|
||||
this.formValues.DataYaml = KubernetesConfigurationHelper.parseData(this.formValues);
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.state = {
|
||||
duplicateKeys: {},
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue