mirror of
https://github.com/portainer/portainer.git
synced 2025-08-07 23:05:26 +02:00
chore(project): add prettier for code format (#3645)
* chore(project): install prettier and lint-staged * chore(project): apply prettier to html too * chore(project): git ignore eslintcache * chore(project): add a comment about format script * chore(prettier): update printWidth * chore(prettier): remove useTabs option * chore(prettier): add HTML validation * refactor(prettier): fix closing tags * feat(prettier): define angular parser for html templates * style(prettier): run prettier on codebase Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
6663073be1
commit
cf5056d9c0
714 changed files with 31228 additions and 28305 deletions
|
|
@ -1,94 +1,98 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('BuildImageController', ['$scope', '$state', 'BuildService', 'Notifications', 'HttpRequestHelper',
|
||||
function ($scope, $state, BuildService, Notifications, HttpRequestHelper) {
|
||||
angular.module('portainer.docker').controller('BuildImageController', [
|
||||
'$scope',
|
||||
'$state',
|
||||
'BuildService',
|
||||
'Notifications',
|
||||
'HttpRequestHelper',
|
||||
function ($scope, $state, BuildService, Notifications, HttpRequestHelper) {
|
||||
$scope.state = {
|
||||
BuildType: 'editor',
|
||||
actionInProgress: false,
|
||||
activeTab: 0,
|
||||
};
|
||||
|
||||
$scope.state = {
|
||||
BuildType: 'editor',
|
||||
actionInProgress: false,
|
||||
activeTab: 0
|
||||
};
|
||||
$scope.formValues = {
|
||||
ImageNames: [{ Name: '' }],
|
||||
UploadFile: null,
|
||||
DockerFileContent: '',
|
||||
URL: '',
|
||||
Path: 'Dockerfile',
|
||||
NodeName: null,
|
||||
};
|
||||
|
||||
$scope.formValues = {
|
||||
ImageNames: [{ Name: '' }],
|
||||
UploadFile: null,
|
||||
DockerFileContent: '',
|
||||
URL: '',
|
||||
Path: 'Dockerfile',
|
||||
NodeName: null
|
||||
};
|
||||
$scope.addImageName = function () {
|
||||
$scope.formValues.ImageNames.push({ Name: '' });
|
||||
};
|
||||
|
||||
$scope.addImageName = function() {
|
||||
$scope.formValues.ImageNames.push({ Name: '' });
|
||||
};
|
||||
$scope.removeImageName = function (index) {
|
||||
$scope.formValues.ImageNames.splice(index, 1);
|
||||
};
|
||||
|
||||
$scope.removeImageName = function(index) {
|
||||
$scope.formValues.ImageNames.splice(index, 1);
|
||||
};
|
||||
function buildImageBasedOnBuildType(method, names) {
|
||||
var buildType = $scope.state.BuildType;
|
||||
var dockerfilePath = $scope.formValues.Path;
|
||||
|
||||
function buildImageBasedOnBuildType(method, names) {
|
||||
var buildType = $scope.state.BuildType;
|
||||
var dockerfilePath = $scope.formValues.Path;
|
||||
if (buildType === 'upload') {
|
||||
var file = $scope.formValues.UploadFile;
|
||||
return BuildService.buildImageFromUpload(names, file, dockerfilePath);
|
||||
} else if (buildType === 'url') {
|
||||
var URL = $scope.formValues.URL;
|
||||
return BuildService.buildImageFromURL(names, URL, dockerfilePath);
|
||||
} else {
|
||||
var dockerfileContent = $scope.formValues.DockerFileContent;
|
||||
return BuildService.buildImageFromDockerfileContent(names, dockerfileContent);
|
||||
}
|
||||
}
|
||||
|
||||
if (buildType === 'upload') {
|
||||
var file = $scope.formValues.UploadFile;
|
||||
return BuildService.buildImageFromUpload(names, file, dockerfilePath);
|
||||
} else if (buildType === 'url') {
|
||||
var URL = $scope.formValues.URL;
|
||||
return BuildService.buildImageFromURL(names, URL, dockerfilePath);
|
||||
} else {
|
||||
var dockerfileContent = $scope.formValues.DockerFileContent;
|
||||
return BuildService.buildImageFromDockerfileContent(names, dockerfileContent);
|
||||
}
|
||||
}
|
||||
$scope.buildImage = function () {
|
||||
var buildType = $scope.state.BuildType;
|
||||
|
||||
$scope.buildImage = function() {
|
||||
var buildType = $scope.state.BuildType;
|
||||
if (buildType === 'editor' && $scope.formValues.DockerFileContent === '') {
|
||||
$scope.state.formValidationError = 'Dockerfile content must not be empty';
|
||||
return;
|
||||
}
|
||||
|
||||
if (buildType === 'editor' && $scope.formValues.DockerFileContent === '') {
|
||||
$scope.state.formValidationError = 'Dockerfile content must not be empty';
|
||||
return;
|
||||
}
|
||||
$scope.state.actionInProgress = true;
|
||||
|
||||
$scope.state.actionInProgress = true;
|
||||
var imageNames = $scope.formValues.ImageNames.filter(function filterNull(x) {
|
||||
return x.Name;
|
||||
}).map(function getNames(x) {
|
||||
return x.Name;
|
||||
});
|
||||
|
||||
var imageNames = $scope.formValues.ImageNames.filter(function filterNull(x) {
|
||||
return x.Name;
|
||||
}).map(function getNames(x) {
|
||||
return x.Name;
|
||||
});
|
||||
var nodeName = $scope.formValues.NodeName;
|
||||
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
|
||||
|
||||
var nodeName = $scope.formValues.NodeName;
|
||||
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
|
||||
buildImageBasedOnBuildType(buildType, imageNames)
|
||||
.then(function success(data) {
|
||||
$scope.buildLogs = data.buildLogs;
|
||||
$scope.state.activeTab = 1;
|
||||
if (data.hasError) {
|
||||
Notifications.error('An error occured during build', { msg: 'Please check build logs output' });
|
||||
} else {
|
||||
Notifications.success('Image successfully built');
|
||||
}
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to build image');
|
||||
})
|
||||
.finally(function final() {
|
||||
$scope.state.actionInProgress = false;
|
||||
});
|
||||
};
|
||||
|
||||
buildImageBasedOnBuildType(buildType, imageNames)
|
||||
.then(function success(data) {
|
||||
$scope.buildLogs = data.buildLogs;
|
||||
$scope.state.activeTab = 1;
|
||||
if (data.hasError) {
|
||||
Notifications.error('An error occured during build', { msg: 'Please check build logs output' });
|
||||
} else {
|
||||
Notifications.success('Image successfully built');
|
||||
}
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to build image');
|
||||
})
|
||||
.finally(function final() {
|
||||
$scope.state.actionInProgress = false;
|
||||
});
|
||||
};
|
||||
$scope.validImageNames = function () {
|
||||
for (var i = 0; i < $scope.formValues.ImageNames.length; i++) {
|
||||
var item = $scope.formValues.ImageNames[i];
|
||||
if (item.Name !== '') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.validImageNames = function() {
|
||||
for (var i = 0; i < $scope.formValues.ImageNames.length; i++) {
|
||||
var item = $scope.formValues.ImageNames[i];
|
||||
if (item.Name !== '') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.editorUpdate = function(cm) {
|
||||
$scope.formValues.DockerFileContent = cm.getValue();
|
||||
};
|
||||
}]);
|
||||
$scope.editorUpdate = function (cm) {
|
||||
$scope.formValues.DockerFileContent = cm.getValue();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<rd-header>
|
||||
<rd-header-title title-text="Build image"></rd-header-title>
|
||||
<rd-header-content>
|
||||
<a ui-sref="docker.images">Images</a> > Build image
|
||||
</rd-header-content>
|
||||
<rd-header-content> <a ui-sref="docker.images">Images</a> > Build image </rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
<div class="row">
|
||||
|
|
@ -11,9 +9,7 @@
|
|||
<rd-widget-body>
|
||||
<uib-tabset active="state.activeTab">
|
||||
<uib-tab index="0">
|
||||
<uib-tab-heading>
|
||||
<i class="fa fa-wrench space-right" aria-hidden="true"></i> Builder
|
||||
</uib-tab-heading>
|
||||
<uib-tab-heading> <i class="fa fa-wrench space-right" aria-hidden="true"></i> Builder </uib-tab-heading>
|
||||
<form class="form-horizontal">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Naming
|
||||
|
|
@ -42,18 +38,21 @@
|
|||
<div ng-if="formValues.ImageNames.length > 0">
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
A name must be specified in one of the following formats: <code>name:tag</code>, <code>repository/name:tag</code> or <code>registryfqdn:port/repository/name:tag</code> format. If you omit the tag the default <b>latest</b> value is assumed.
|
||||
A name must be specified in one of the following formats: <code>name:tag</code>, <code>repository/name:tag</code> or
|
||||
<code>registryfqdn:port/repository/name:tag</code> format. If you omit the tag the default <b>latest</b> value is assumed.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group" >
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12 form-inline" style="margin-top: 10px;">
|
||||
<div ng-repeat="item in formValues.ImageNames track by $index" style="margin-top: 2px;">
|
||||
<!-- name-input -->
|
||||
<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="item.Name" placeholder="e.g. myImage:myTag" auto-focus>
|
||||
<span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[item.Name !== '']" aria-hidden="true"></i></span>
|
||||
<input type="text" class="form-control" ng-model="item.Name" placeholder="e.g. myImage:myTag" auto-focus />
|
||||
<span class="input-group-addon"
|
||||
><i ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[item.Name !== '']" aria-hidden="true"></i
|
||||
></span>
|
||||
</div>
|
||||
<!-- !name-input -->
|
||||
<!-- actions -->
|
||||
|
|
@ -74,10 +73,10 @@
|
|||
Build method
|
||||
</div>
|
||||
<div class="form-group"></div>
|
||||
<div class="form-group" style="margin-bottom: 0">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<div class="boxselector_wrapper">
|
||||
<div>
|
||||
<input type="radio" id="method_editor" ng-model="state.BuildType" value="editor" ng-click="toggleEditor()">
|
||||
<input type="radio" id="method_editor" ng-model="state.BuildType" value="editor" ng-click="toggleEditor()" />
|
||||
<label for="method_editor">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
|
|
@ -87,7 +86,7 @@
|
|||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="method_upload" ng-model="state.BuildType" value="upload" ng-click="saveEditorContent()">
|
||||
<input type="radio" id="method_upload" ng-model="state.BuildType" value="upload" ng-click="saveEditorContent()" />
|
||||
<label for="method_upload">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
|
|
@ -97,7 +96,7 @@
|
|||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="method_url" ng-model="state.BuildType" value="url" ng-click="saveEditorContent()">
|
||||
<input type="radio" id="method_url" ng-model="state.BuildType" value="url" ng-click="saveEditorContent()" />
|
||||
<label for="method_url">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-globe" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
|
|
@ -116,7 +115,8 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
You can get more information about Dockerfile format in the <a href="https://docs.docker.com/engine/reference/builder/" target="_blank">official documentation</a>.
|
||||
You can get more information about Dockerfile format in the
|
||||
<a href="https://docs.docker.com/engine/reference/builder/" target="_blank">official documentation</a>.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
identifier="image-build-editor"
|
||||
placeholder="Define or paste the content of your Dockerfile here"
|
||||
yml="false"
|
||||
on-change="editorUpdate"
|
||||
on-change="(editorUpdate)"
|
||||
></code-editor>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -138,7 +138,8 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
You can upload a Dockerfile or a tar archive containing a Dockerfile from your computer. When using an tarball, the root folder will be used as the build context.
|
||||
You can upload a Dockerfile or a tar archive containing a Dockerfile from your computer. When using an tarball, the root folder will be used as the build
|
||||
context.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -159,7 +160,7 @@
|
|||
<div class="form-group">
|
||||
<label for="image_path" class="col-sm-2 control-label text-left">Dockerfile path</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile">
|
||||
<input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -172,13 +173,14 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<span class="col-sm-12 text-muted small">
|
||||
Specify the URL to a Dockerfile, a tarball or a public Git repository (suffixed by <b>.git</b>). When using a tarball or a Git repository URL, the root folder will be used as the build context.
|
||||
Specify the URL to a Dockerfile, a tarball or a public Git repository (suffixed by <b>.git</b>). When using a tarball or a Git repository URL, the root folder
|
||||
will be used as the build context.
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="image_url" class="col-sm-2 control-label text-left">URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" ng-model="formValues.URL" id="image_url" placeholder="https://myhost.mydomain/myimage.tar.gz">
|
||||
<input type="text" class="form-control" ng-model="formValues.URL" id="image_url" placeholder="https://myhost.mydomain/myimage.tar.gz" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -189,7 +191,7 @@
|
|||
<div class="form-group">
|
||||
<label for="image_path" class="col-sm-2 control-label text-left">Dockerfile path</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile">
|
||||
<input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,9 +201,7 @@
|
|||
Deployment
|
||||
</div>
|
||||
<!-- node-selection -->
|
||||
<node-selector
|
||||
model="formValues.NodeName">
|
||||
</node-selector>
|
||||
<node-selector model="formValues.NodeName"> </node-selector>
|
||||
<!-- !node-selection -->
|
||||
</div>
|
||||
<!-- actions -->
|
||||
|
|
@ -210,12 +210,16 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button type="button" class="btn btn-primary btn-sm"
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
ng-disabled="state.actionInProgress
|
||||
|| (state.BuildType === 'upload' && (!formValues.UploadFile || !formValues.Path))
|
||||
|| (state.BuildType === 'url' && (!formValues.URL || !formValues.Path))
|
||||
|| (formValues.ImageNames.length === 0 || !validImageNames())"
|
||||
ng-click="buildImage()" button-spinner="state.actionInProgress">
|
||||
ng-click="buildImage()"
|
||||
button-spinner="state.actionInProgress"
|
||||
>
|
||||
<span ng-hide="state.actionInProgress">Build the image</span>
|
||||
<span ng-show="state.actionInProgress">Image building in progress...</span>
|
||||
</button>
|
||||
|
|
@ -226,9 +230,7 @@
|
|||
</form>
|
||||
</uib-tab>
|
||||
<uib-tab index="1" disable="!buildLogs">
|
||||
<uib-tab-heading>
|
||||
<i class="fa fa-file-alt space-right" aria-hidden="true"></i> Output
|
||||
</uib-tab-heading>
|
||||
<uib-tab-heading> <i class="fa fa-file-alt space-right" aria-hidden="true"></i> Output </uib-tab-heading>
|
||||
<pre class="log_viewer">
|
||||
<div ng-repeat="line in buildLogs track by $index" class="line"><p class="inner_line" ng-click="active=!active" ng-class="{'line_selected': active}">{{ line }}</p></div>
|
||||
<div ng-if="!buildLogs.length" class="line"><p class="inner_line">No build output available.</p></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue