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

refactor(code-editor): introduce code-editor component (#1674) 

* refactor(code-editor): introduce code-editor component

* refactor(code-editor): add some extra validation
pull/1666/head
Anthony Lapenna 2018-02-27 08:19:21 +01:00 committed by GitHub
parent eb43579378
commit 9b80b6adb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 104 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/docker/views/configs/create/createConfigController.js
View File

@ -1,11 +1,12 @@
angular.module('portainer.docker')
.controller('CreateConfigController', ['$scope', '$state', '$document', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService', 'CodeMirrorService',
function ($scope, $state, $document, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService, CodeMirrorService) {
.controller('CreateConfigController', ['$scope', '$state', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService',
function ($scope, $state, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
$scope.formValues = {
Name: '',
Labels: [],
AccessControlData: new AccessControlFormData()
AccessControlData: new AccessControlFormData(),
ConfigContent: ''
};
$scope.state = {
@ -31,9 +32,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
}
function prepareConfigData(config) {
// The codemirror editor does not work with ng-model so we need to retrieve
// the value directly from the editor.
var configData = $scope.editor.getValue();
var configData = $scope.formValues.ConfigContent;
config.Data = btoa(unescape(encodeURIComponent(configData)));
}
@ -62,6 +61,11 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
var userDetails = Authentication.getUserDetails();
var isAdmin = userDetails.role === 1;
if ($scope.formValues.ConfigContent === '') {
$scope.state.formValidationError = 'Config content must not be empty';
return;
}
if (!validateForm(accessControlData, isAdmin)) {
return;
}
@ -83,14 +87,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
});
};
function initView() {
$document.ready(function() {
var webEditorElement = $document[0].getElementById('config-editor', false);
if (webEditorElement) {
$scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, false);
}
});
}
initView();
$scope.editorUpdate = function(cm) {
$scope.formValues.ConfigContent = cm.getValue();
};
}]);

8
app/docker/views/configs/create/createconfig.html
View File

@ -21,7 +21,12 @@
<!-- config-data -->
<div class="form-group">
<div class="col-sm-12">
<textarea id="config-editor" class="form-control"></textarea>
<code-editor
identifier="config-creation-editor"
placeholder="Define or paste the content of your config here"
yml="false"
on-change="editorUpdate"
></code-editor>
</div>
</div>
<!-- !config-data -->
@ -62,6 +67,7 @@
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name" ng-click="create()">Create config</button>
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
</div>
</div>
<!-- !actions -->

7
app/docker/views/configs/edit/config.html
View File

@ -70,7 +70,12 @@
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<textarea id="config-editor" ng-model="config.Data" class="form-control"></textarea>
<code-editor
identifier="config-editor"
yml="false"
read-only="true"
value="config.Data"
></code-editor>
</div>
</div>
</form>

14
app/docker/views/configs/edit/configController.js
View File

@ -1,6 +1,6 @@
angular.module('portainer.docker')
.controller('ConfigController', ['$scope', '$transition$', '$state', '$document', 'ConfigService', 'Notifications', 'CodeMirrorService',
function ($scope, $transition$, $state, $document, ConfigService, Notifications, CodeMirrorService) {
.controller('ConfigController', ['$scope', '$transition$', '$state', 'ConfigService', 'Notifications',
function ($scope, $transition$, $state, ConfigService, Notifications) {
$scope.removeConfig = function removeConfig(configId) {
ConfigService.remove(configId)
@ -13,20 +13,10 @@ function ($scope, $transition$, $state, $document, ConfigService, Notifications,
});
};
function initEditor() {
$document.ready(function() {
var webEditorElement = $document[0].getElementById('config-editor');
if (webEditorElement) {
$scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, true);
}
});
}
function initView() {
ConfigService.config($transition$.params().id)
.then(function success(data) {
$scope.config = data;
initEditor();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve config details');

56
app/docker/views/stacks/create/createStackController.js
View File

@ -1,14 +1,10 @@
angular.module('portainer.docker')
.controller('CreateStackController', ['$scope', '$state', '$document', 'StackService', 'CodeMirrorService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService', 'FormHelper',
function ($scope, $state, $document, StackService, CodeMirrorService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper) {
// Store the editor content when switching builder methods
var editorContent = '';
var editorEnabled = true;
.controller('CreateStackController', ['$scope', '$state', 'StackService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService', 'FormHelper',
function ($scope, $state, StackService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper) {
$scope.formValues = {
Name: '',
StackFileContent: '# Define or paste the content of your docker-compose file here',
StackFileContent: '',
StackFile: null,
RepositoryURL: '',
Env: [],
@ -42,15 +38,11 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
return true;
}
function createStack(name) {
var method = $scope.state.Method;
function createStack(name, method) {
var env = FormHelper.removeInvalidEnvVars($scope.formValues.Env);
if (method === 'editor') {
// The codemirror editor does not work with ng-model so we need to retrieve
// the value directly from the editor.
var stackFileContent = $scope.editor.getValue();
var stackFileContent = $scope.formValues.StackFileContent;
return StackService.createStackFromFileContent(name, stackFileContent, env);
} else if (method === 'upload') {
var stackFile = $scope.formValues.StackFile;
@ -64,18 +56,24 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
$scope.deployStack = function () {
var name = $scope.formValues.Name;
var method = $scope.state.Method;
var accessControlData = $scope.formValues.AccessControlData;
var userDetails = Authentication.getUserDetails();
var isAdmin = userDetails.role === 1;
var userId = userDetails.ID;
if (method === 'editor' && $scope.formValues.StackFileContent === '') {
$scope.state.formValidationError = 'Stack file content must not be empty';
return;
}
if (!validateForm(accessControlData, isAdmin)) {
return;
}
$scope.state.actionInProgress = true;
createStack(name)
createStack(name, method)
.then(function success(data) {
Notifications.success('Stack successfully deployed');
})
@ -96,33 +94,7 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
});
};
function enableEditor(value) {
$document.ready(function() {
var webEditorElement = $document[0].getElementById('web-editor');
if (webEditorElement) {
$scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, true, false);
if (value) {
$scope.editor.setValue(value);
}
}
});
}
$scope.toggleEditor = function() {
if (!editorEnabled) {
enableEditor(editorContent);
editorEnabled = true;
}
$scope.editorUpdate = function(cm) {
$scope.formValues.StackFileContent = cm.getValue();
};
$scope.saveEditorContent = function() {
editorContent = $scope.editor.getValue();
editorEnabled = false;
};
function initView() {
enableEditor();
}
initView();
}]);

21
app/docker/views/stacks/create/createstack.html
View File

@ -31,7 +31,7 @@
<div class="form-group" style="margin-bottom: 0">
<div class="boxselector_wrapper">
<div>
<input type="radio" id="method_editor" ng-model="state.Method" value="editor" ng-click="toggleEditor(state.Method)">
<input type="radio" id="method_editor" ng-model="state.Method" value="editor">
<label for="method_editor">
<div class="boxselector_header">
<i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
@ -41,7 +41,7 @@
</label>
</div>
<div>
<input type="radio" id="method_upload" ng-model="state.Method" value="upload" ng-click="saveEditorContent()">
<input type="radio" id="method_upload" ng-model="state.Method" value="upload">
<label for="method_upload">
<div class="boxselector_header">
<i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
@ -51,7 +51,7 @@
</label>
</div>
<div>
<input type="radio" id="method_repository" ng-model="state.Method" value="repository" ng-click="saveEditorContent()">
<input type="radio" id="method_repository" ng-model="state.Method" value="repository">
<label for="method_repository">
<div class="boxselector_header">
<i class="fa fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
@ -64,7 +64,7 @@
</div>
<!-- !build-method -->
<!-- web-editor -->
<div ng-if="state.Method === 'editor'">
<div ng-show="state.Method === 'editor'">
<div class="col-sm-12 form-section-title">
Web editor
</div>
@ -75,13 +75,18 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea id="web-editor" class="form-control" ng-model="formValues.StackFileContent" placeholder='version: "3"'></textarea>
<code-editor
identifier="stack-creation-editor"
placeholder="# Define or paste the content of your docker-compose file here"
yml="true"
on-change="editorUpdate"
></code-editor>
</div>
</div>
</div>
<!-- !web-editor -->
<!-- upload -->
<div ng-if="state.Method === 'upload'">
<div ng-show="state.Method === 'upload'">
<div class="col-sm-12 form-section-title">
Upload
</div>
@ -102,7 +107,7 @@
</div>
<!-- !upload -->
<!-- repository -->
<div ng-if="state.Method === 'repository'">
<div ng-show="state.Method === 'repository'">
<div class="col-sm-12 form-section-title">
Git repository
</div>
@ -167,7 +172,7 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || (state.Method === 'editor' && !formValues.StackFileContent)
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress
|| (state.Method === 'upload' && !formValues.StackFile)
|| (state.Method === 'repository' && (!formValues.RepositoryURL || !formValues.RepositoryPath))
|| !formValues.Name" ng-click="deployStack()" button-spinner="state.actionInProgress">

8
app/docker/views/stacks/edit/stack.html
View File

@ -57,7 +57,13 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea id="web-editor" class="form-control" ng-model="stackFileContent" placeholder='version: "3"'></textarea>
<code-editor
identifier="stack-editor"
placeholder="# Define or paste the content of your docker-compose file here"
yml="true"
on-change="editorUpdate"
value="stackFileContent"
></code-editor>
</div>
</div>
<div class="col-sm-12 form-section-title">

19
app/docker/views/stacks/edit/stackController.js
View File

@ -1,6 +1,6 @@
angular.module('portainer.docker')
.controller('StackController', ['$q', '$scope', '$state', '$transition$', '$document', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'CodeMirrorService', 'Notifications', 'FormHelper', 'EndpointProvider',
function ($q, $scope, $state, $transition$, $document, StackService, NodeService, ServiceService, TaskService, ServiceHelper, CodeMirrorService, Notifications, FormHelper, EndpointProvider) {
.controller('StackController', ['$q', '$scope', '$state', '$transition$', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'Notifications', 'FormHelper', 'EndpointProvider',
function ($q, $scope, $state, $transition$, StackService, NodeService, ServiceService, TaskService, ServiceHelper, Notifications, FormHelper, EndpointProvider) {
$scope.state = {
actionInProgress: false,
@ -12,9 +12,7 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
};
$scope.deployStack = function () {
// The codemirror editor does not work with ng-model so we need to retrieve
// the value directly from the editor.
var stackFile = $scope.editor.getValue();
var stackFile = $scope.stackFileContent;
var env = FormHelper.removeInvalidEnvVars($scope.stack.Env);
var prune = $scope.formValues.Prune;
@ -63,13 +61,6 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
.then(function success(data) {
$scope.stackFileContent = data.stackFile;
$document.ready(function() {
var webEditorElement = $document[0].getElementById('web-editor');
if (webEditorElement) {
$scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, true, false);
}
});
$scope.nodes = data.nodes;
var services = data.services;
@ -89,5 +80,9 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
});
}
$scope.editorUpdate = function(cm) {
$scope.stackFileContent = cm.getValue();
};
initView();
}]);

12
app/portainer/components/code-editor/code-editor.js Normal file
View File

@ -0,0 +1,12 @@
angular.module('portainer.app').component('codeEditor', {
templateUrl: 'app/portainer/components/code-editor/codeEditor.html',
controller: 'CodeEditorController',
bindings: {
identifier: '@',
placeholder: '@',
yml: '<',
readOnly: '<',
onChange: '<',
value: '<'
}
});

1
app/portainer/components/code-editor/codeEditor.html Normal file
View File

@ -0,0 +1 @@
<textarea id="{{ $ctrl.identifier }}" class="form-control" placeholder="{{ $ctrl.placeholder }}"></textarea>

20
app/portainer/components/code-editor/codeEditorController.js Normal file
View File

@ -0,0 +1,20 @@
angular.module('portainer.app')
.controller('CodeEditorController', ['$document', 'CodeMirrorService',
function ($document, CodeMirrorService) {
var ctrl = this;
this.$onInit = function() {
$document.ready(function() {
var editorElement = $document[0].getElementById(ctrl.identifier);
if (editorElement) {
ctrl.editor = CodeMirrorService.applyCodeMirrorOnElement(editorElement, ctrl.yml, ctrl.readOnly);
if (ctrl.onChange) {
ctrl.editor.on('change', ctrl.onChange);
}
if (ctrl.value) {
ctrl.editor.setValue(ctrl.value);
}
}
});
};
}]);

1
app/portainer/services/stateManager.js
View File

@ -110,7 +110,6 @@ function StateManagerFactory($q, SystemService, InfoHelper, LocalStorage, Settin
function assignExtensions(endpointExtensions) {
console.log(JSON.stringify(endpointExtensions, null, 4));
var extensions = [];
for (var i = 0; i < endpointExtensions.length; i++) {

2
vendor.yml
View File

@ -17,6 +17,7 @@ js:
- node_modules/codemirror/mode/yaml/yaml.js
- node_modules/codemirror/addon/lint/lint.js
- node_modules/codemirror/addon/lint/yaml-lint.js
- node_modules/codemirror/addon/display/placeholder.js
minified:
- node_modules/jquery/dist/jquery.min.js
- node_modules/bootstrap/dist/js/bootstrap.min.js
@ -34,6 +35,7 @@ js:
- node_modules/codemirror/mode/yaml/yaml.js
- node_modules/codemirror/addon/lint/lint.js
- node_modules/codemirror/addon/lint/yaml-lint.js
- node_modules/codemirror/addon/display/placeholder.js
css:
regular:
- node_modules/bootstrap/dist/css/bootstrap.css