mirror of
https://github.com/portainer/portainer.git
synced 2025-08-08 15:25:22 +02:00
refactor(app): introduce webpack and babel (#2407)
* feat(agent): add new host page * feat(agent): convert volume-browser to files-datatable * fix(agent): browse folders in file-datatable * feat(engine-details): replace engine view with host view * feat(engine-details): remove old panels * feat(engine-details): add basic engine-details-panel component * feat(engine-details): pass details to the different components * feat(engine-details): replace host-view with host-overview * feat(engine-details): add commaseperated filter * feat(engine-details): add host-view container component * feat(engine-details): add host-details component * feat(engine-details): build host details object * feat(engine-details): format engine version * feat(engine-details): get details for one node * feat(engine-details): pass is-agent from view * feat(engine-details): replace old node view with a new component * feat(engine-details): add swarm-node-details component * feat(engine-details): remove isSwarm binding * feat(engine-details): remove node-details and include in parent * feat(engine-details): add labels-table component * feat(engine-details): add update node service * feat(engine-details): add update label functionality * style(engine-details): remove whitespaces * feat(engine-details): remove old node page * feat(engine-details): pass is agent to host details * feat(host-details): hide missing info * feat(host-details): update node availability * style(host-details): remove obsolete event object * feat(host-details): fix labels not sending * feat(host-details): remove flags for hiding data * feat(host-details): create mock call to server for agent host info * style(host-details): fix spelling mistake in filter's name * feat(host-details): get info from agent * feat(host-details): hide engine labels when empty * feat(node-details): move labels table and save button * feat(host-info): add different urls for refresh * feat(host-details): show disk/devices info for agent * feat(host-view): add loading indicator to devices-panel * feat(host-details): add loading indicator to disks panel * feat(agent): fix browse volume * feat(agent): browse files * feat(agent): enable rename * feat(agent): download file * fix(agent): download file from root * feat(agent): delete file * style(agent): remove whitespaces * fix(agent): fix link on node browser * feat(agent): basic file uploader * feat(agent): add basic file upload * fix(volume-browser): move volume id to query params * feat(node-browser): moved uploader into browser * feat(node-browser): add upload spinner * feat(agent): browse files relative to root * feat(build): add webpack build config * feat(build): add missing imports * feat(webpack): add missing imports * feat(build): enable eslint on build * feat(build): add webpack notifier * feat(build): clean terminal on build * feat(build): import all globals * feat(build): add angular import * feat(build): fix styles * feat(build): load favicons * feat(build): load css before script * feat(webpack): split vendors css and js to a different bundle * feat(webpack): import angular in all files * feat(webpack): remove eslint global config * feat(webpack): add webpack clean dist * feat(webpack): fix styling issues * refactor(webpack): remove empty controllers * refactor(webpack): optimize moment * refactor(webpack): add bundle analyzer * feat(webpack): add babel * refactor(webpack): optimize lodash * refactor(toastr): update toastr * feat(webpack): create basic production and dev config * fix(webpack): fix production config * fix(webpack): fix html templates url * refactor(webpack): remove angular imports * refactor(webpack): remove more angular imports * refactor(webpack): return angular to entry file * style(webpack): remove comments from config * fix(hosts): remove browse button * fix(webpack): import lodash * fix(webpack): import missing htmls * feat(webpack): reduce lodash size * feat(webpack): config grunt to use webpack * feat(webpack): add postcss * chore(codeclimate): use eslint-5 channel * feat(deps): upgrade from lodash to lodash-es * fix(webpack): fix bug with lodash * chore(build): add build client script * fix(webpack): fix missing jsyaml reference * refactor(webpack): seperate builds of img files * chore(build): add a way to check times of webpack build * feat(webpack): add dev server * fix(webpack): fix css output name * chore(webpack): optimize images * chore(webpack): add node env * fix(build): copy templates on release * chore(webpack): set env NODE_ENV * feat(webpack): set NODE_ENV on production builds * fix(extensions): set image path * refactor(css): move vendor css to js import * style(app): remove whitespaces * fix(build-system): allow DevOps pipeline to leverage webpack (#2670) * Update devopsbuild task to use webpack & remove AppVeyor environment var * Added -Force to replace the existing dist folder * Removed Test-Path * dep(build-system): add angularjs-annotate to webpack + fix on imports * Merge branch 'develop' into webpack * refactor(app): webpack aliases for imports + async / await dep + start refactor * style(extensions): use develop version of the view * fix(app): fix several issues introduced by webpack migration * fix(webpack): fix ng-include not loading templates with webpack * Fix Windows CI with Webpack (#2782) * fix(configs): refactor broke configs creation and list views * fix(build-system): update build_binary_devops for Windows
This commit is contained in:
Chaim Lev-Ari
Anthony Lapenna
parent
14845a4a53
commit
45113a7ff4
308 changed files with 8798 additions and 1050 deletions
|
|
@ -11,10 +11,10 @@
|
|||
<div class="col-sm-12">
|
||||
<configs-datatable
|
||||
title-text="Configs" title-icon="fa-file-code"
|
||||
dataset="configs" table-key="configs"
|
||||
dataset="ctrl.configs" table-key="configs"
|
||||
order-by="Name"
|
||||
show-ownership-column="applicationState.application.authentication"
|
||||
remove-action="removeAction"
|
||||
remove-action="ctrl.removeAction"
|
||||
></configs-datatable>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,43 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('ConfigsController', ['$scope', '$state', 'ConfigService', 'Notifications',
|
||||
function ($scope, $state, ConfigService, Notifications) {
|
||||
import angular from 'angular';
|
||||
|
||||
$scope.removeAction = function (selectedItems) {
|
||||
var actionCount = selectedItems.length;
|
||||
angular.forEach(selectedItems, function (config) {
|
||||
ConfigService.remove(config.Id)
|
||||
.then(function success() {
|
||||
Notifications.success('Config successfully removed', config.Name);
|
||||
var index = $scope.configs.indexOf(config);
|
||||
$scope.configs.splice(index, 1);
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to remove config');
|
||||
})
|
||||
.finally(function final() {
|
||||
--actionCount;
|
||||
if (actionCount === 0) {
|
||||
$state.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
class ConfigsController {
|
||||
|
||||
function initView() {
|
||||
ConfigService.configs()
|
||||
.then(function success(data) {
|
||||
$scope.configs = data;
|
||||
})
|
||||
.catch(function error(err) {
|
||||
$scope.configs = [];
|
||||
Notifications.error('Failure', err, 'Unable to retrieve configs');
|
||||
});
|
||||
/* @ngInject */
|
||||
constructor($state, ConfigService, Notifications) {
|
||||
this.$state = $state;
|
||||
this.ConfigService = ConfigService;
|
||||
this.Notifications = Notifications;
|
||||
|
||||
this.removeAction = this.removeAction.bind(this);
|
||||
}
|
||||
|
||||
initView();
|
||||
}]);
|
||||
async $onInit() {
|
||||
this.configs = [];
|
||||
try {
|
||||
this.configs = await this.ConfigService.configs();
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve configs');
|
||||
}
|
||||
}
|
||||
|
||||
async removeAction(selectedItems) {
|
||||
let actionCount = selectedItems.length;
|
||||
for (const config of selectedItems) {
|
||||
try {
|
||||
await this.ConfigService.remove(config.Id);
|
||||
this.Notifications.success('Config successfully removed', config.Name);
|
||||
const index = this.configs.indexOf(config);
|
||||
this.configs.splice(index, 1);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to remove config');
|
||||
} finally {
|
||||
--actionCount;
|
||||
if (actionCount === 0) {
|
||||
this.$state.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default ConfigsController;
|
||||
angular.module('portainer.docker').controller('ConfigsController', ConfigsController);
|
||||
|
|
|
|||
|
|
@ -1,118 +1,142 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('CreateConfigController', ['$scope', '$state', '$transition$', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService',
|
||||
function ($scope, $state, $transition$, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
|
||||
$scope.formValues = {
|
||||
Name: '',
|
||||
Labels: [],
|
||||
AccessControlData: new AccessControlFormData(),
|
||||
ConfigContent: ''
|
||||
};
|
||||
import _ from "lodash-es";
|
||||
import { AccessControlFormData } from "Portainer/components/accessControlForm/porAccessControlFormModel";
|
||||
|
||||
$scope.state = {
|
||||
formValidationError: ''
|
||||
};
|
||||
import angular from "angular";
|
||||
|
||||
$scope.addLabel = function() {
|
||||
$scope.formValues.Labels.push({ name: '', value: ''});
|
||||
};
|
||||
class CreateConfigController {
|
||||
/* @ngInject */
|
||||
constructor($state, $transition$, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
|
||||
this.$state = $state;
|
||||
this.$transition$ = $transition$;
|
||||
this.Notifications = Notifications;
|
||||
this.ConfigService = ConfigService;
|
||||
this.Authentication = Authentication;
|
||||
this.FormValidator = FormValidator;
|
||||
this.ResourceControlService = ResourceControlService;
|
||||
|
||||
$scope.removeLabel = function(index) {
|
||||
$scope.formValues.Labels.splice(index, 1);
|
||||
};
|
||||
this.formValues = {
|
||||
Name: "",
|
||||
Labels: [],
|
||||
AccessControlData: new AccessControlFormData(),
|
||||
ConfigContent: ""
|
||||
};
|
||||
|
||||
function prepareLabelsConfig(config) {
|
||||
var labels = {};
|
||||
$scope.formValues.Labels.forEach(function (label) {
|
||||
this.state = {
|
||||
formValidationError: ""
|
||||
};
|
||||
|
||||
this.editorUpdate = this.editorUpdate.bind(this);
|
||||
}
|
||||
|
||||
addLabel() {
|
||||
this.formValues.Labels.push({ name: "", value: "" });
|
||||
}
|
||||
|
||||
removeLabel(index) {
|
||||
this.formValues.Labels.splice(index, 1);
|
||||
}
|
||||
|
||||
prepareLabelsConfig(config) {
|
||||
let labels = {};
|
||||
this.formValues.Labels.forEach(function(label) {
|
||||
if (label.name && label.value) {
|
||||
labels[label.name] = label.value;
|
||||
labels[label.name] = label.value;
|
||||
}
|
||||
});
|
||||
config.Labels = labels;
|
||||
}
|
||||
|
||||
function prepareConfigData(config) {
|
||||
var configData = $scope.formValues.ConfigContent;
|
||||
prepareConfigData(config) {
|
||||
let configData = this.formValues.ConfigContent;
|
||||
config.Data = btoa(unescape(encodeURIComponent(configData)));
|
||||
}
|
||||
|
||||
function prepareConfiguration() {
|
||||
var config = {};
|
||||
config.Name = $scope.formValues.Name;
|
||||
prepareConfigData(config);
|
||||
prepareLabelsConfig(config);
|
||||
prepareConfiguration() {
|
||||
let config = {};
|
||||
config.Name = this.formValues.Name;
|
||||
this.prepareConfigData(config);
|
||||
this.prepareLabelsConfig(config);
|
||||
return config;
|
||||
}
|
||||
|
||||
function validateForm(accessControlData, isAdmin) {
|
||||
$scope.state.formValidationError = '';
|
||||
var error = '';
|
||||
error = FormValidator.validateAccessControl(accessControlData, isAdmin);
|
||||
validateForm(accessControlData, isAdmin) {
|
||||
this.state.formValidationError = "";
|
||||
let error = "";
|
||||
error = this.FormValidator.validateAccessControl(
|
||||
accessControlData,
|
||||
isAdmin
|
||||
);
|
||||
|
||||
if (error) {
|
||||
$scope.state.formValidationError = error;
|
||||
this.state.formValidationError = error;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
$scope.create = function () {
|
||||
var accessControlData = $scope.formValues.AccessControlData;
|
||||
var userDetails = Authentication.getUserDetails();
|
||||
var isAdmin = userDetails.role === 1;
|
||||
async create() {
|
||||
let accessControlData = this.formValues.AccessControlData;
|
||||
let userDetails = this.Authentication.getUserDetails();
|
||||
let isAdmin = userDetails.role === 1;
|
||||
|
||||
if ($scope.formValues.ConfigContent === '') {
|
||||
$scope.state.formValidationError = 'Config content must not be empty';
|
||||
if (this.formValues.ConfigContent === "") {
|
||||
this.state.formValidationError = "Config content must not be empty";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateForm(accessControlData, isAdmin)) {
|
||||
if (!this.validateForm(accessControlData, isAdmin)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var config = prepareConfiguration();
|
||||
let config = this.prepareConfiguration();
|
||||
|
||||
ConfigService.create(config)
|
||||
.then(function success(data) {
|
||||
var configIdentifier = data.ID;
|
||||
var userId = userDetails.ID;
|
||||
return ResourceControlService.applyResourceControl('config', configIdentifier, userId, accessControlData, []);
|
||||
})
|
||||
.then(function success() {
|
||||
Notifications.success('Config successfully created');
|
||||
$state.go('docker.configs', {}, {reload: true});
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to create config');
|
||||
});
|
||||
};
|
||||
|
||||
$scope.editorUpdate = function(cm) {
|
||||
$scope.formValues.ConfigContent = cm.getValue();
|
||||
};
|
||||
|
||||
function initView() {
|
||||
if (!$transition$.params().id) {
|
||||
$scope.formValues.displayCodeEditor = true;
|
||||
return;
|
||||
try {
|
||||
let data = await this.ConfigService.create(config);
|
||||
let configIdentifier = data.ID;
|
||||
let userId = userDetails.ID;
|
||||
await this.ResourceControlService.applyResourceControl(
|
||||
"config",
|
||||
configIdentifier,
|
||||
userId,
|
||||
accessControlData,
|
||||
[]
|
||||
);
|
||||
this.Notifications.success("Config successfully created");
|
||||
this.$state.go("docker.configs", {}, { reload: true });
|
||||
} catch (err) {
|
||||
this.Notifications.error("Failure", err, "Unable to create config");
|
||||
}
|
||||
|
||||
ConfigService.config($transition$.params().id)
|
||||
.then(function success(data) {
|
||||
$scope.formValues.Name = data.Name + '_copy';
|
||||
$scope.formValues.Data = data.Data;
|
||||
var labels = _.keys(data.Labels);
|
||||
for (var i = 0; i < labels.length; i++) {
|
||||
var labelName = labels[i];
|
||||
var labelValue = data.Labels[labelName];
|
||||
$scope.formValues.Labels.push({ name: labelName, value: labelValue});
|
||||
}
|
||||
$scope.formValues.displayCodeEditor = true;
|
||||
})
|
||||
.catch(function error(err) {
|
||||
$scope.formValues.displayCodeEditor = true;
|
||||
Notifications.error('Failure', err, 'Unable to clone config');
|
||||
});
|
||||
}
|
||||
|
||||
initView();
|
||||
}]);
|
||||
editorUpdate(cm) {
|
||||
this.formValues.ConfigContent = cm.getValue();
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
if (!this.$transition$.params().id) {
|
||||
this.formValues.displayCodeEditor = true;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let data = await this.ConfigService.config(this.$transition$.params().id);
|
||||
this.formValues.Name = data.Name + "_copy";
|
||||
this.formValues.Data = data.Data;
|
||||
let labels = _.keys(data.Labels);
|
||||
for (let i = 0; i < labels.length; i++) {
|
||||
let labelName = labels[i];
|
||||
let labelValue = data.Labels[labelName];
|
||||
this.formValues.Labels.push({ name: labelName, value: labelValue });
|
||||
}
|
||||
this.formValues.displayCodeEditor = true;
|
||||
} catch (err) {
|
||||
this.formValues.displayCodeEditor = true;
|
||||
this.Notifications.error("Failure", err, "Unable to clone config");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default CreateConfigController;
|
||||
angular
|
||||
.module("portainer.docker")
|
||||
.controller("CreateConfigController", CreateConfigController);
|
||||
|
|
|
|||
|
|
@ -14,19 +14,19 @@
|
|||
<div class="form-group">
|
||||
<label for="config_name" class="col-sm-1 control-label text-left">Name</label>
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" ng-model="formValues.Name" id="config_name" placeholder="e.g. myConfig">
|
||||
<input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig">
|
||||
</div>
|
||||
</div>
|
||||
<!-- !name-input -->
|
||||
<!-- config-data -->
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12" ng-if="formValues.displayCodeEditor">
|
||||
<div class="col-sm-12" ng-if="ctrl.formValues.displayCodeEditor">
|
||||
<code-editor
|
||||
identifier="config-creation-editor"
|
||||
placeholder="Define or paste the content of your config here"
|
||||
yml="false"
|
||||
on-change="editorUpdate"
|
||||
value="formValues.Data"
|
||||
on-change="ctrl.editorUpdate"
|
||||
value="ctrl.formValues.Data"
|
||||
></code-editor>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,13 +35,13 @@
|
|||
<div class="form-group">
|
||||
<div class="col-sm-12" style="margin-top: 5px;">
|
||||
<label class="control-label text-left">Labels</label>
|
||||
<span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
|
||||
<span class="label label-default interactive" style="margin-left: 10px;" ng-click="ctrl.addLabel()">
|
||||
<i class="fa fa-plus-circle" aria-hidden="true"></i> add label
|
||||
</span>
|
||||
</div>
|
||||
<!-- labels-input-list -->
|
||||
<div class="col-sm-12 form-inline" style="margin-top: 10px;">
|
||||
<div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
|
||||
<div ng-repeat="label in ctrl.formValues.Labels" style="margin-top: 2px;">
|
||||
<div class="input-group col-sm-5 input-group-sm">
|
||||
<span class="input-group-addon">name</span>
|
||||
<input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<span class="input-group-addon">value</span>
|
||||
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
|
||||
</div>
|
||||
<button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
|
||||
<button class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeLabel($index)">
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
<!-- !labels-->
|
||||
<!-- access-control -->
|
||||
<por-access-control-form form-data="formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
|
||||
<por-access-control-form form-data="ctrl.formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
|
||||
<!-- !access-control -->
|
||||
<!-- actions -->
|
||||
<div class="col-sm-12 form-section-title">
|
||||
|
|
@ -67,8 +67,8 @@
|
|||
</div>
|
||||
<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>
|
||||
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!ctrl.formValues.Name" ng-click="ctrl.create()">Create config</button>
|
||||
<span class="text-danger" ng-if="ctrl.state.formValidationError" style="margin-left: 5px;">{{ ctrl.state.formValidationError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue