Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-08 23:35:31 +02:00
Code Issues Releases Activity

chore(project): add prettier for code format (#3645)

Browse source 
* 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 2020-04-11 00:54:53 +03:00 • committed by GitHub
parent 6663073be1
commit cf5056d9c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
714 changed files with 31228 additions and 28305 deletions
Download patch file Download diff file Expand all files Collapse all files

166
app/docker/views/images/build/buildImageController.js
View file

@ -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();
};
},
]);

60
app/docker/views/images/build/buildimage.html
View file

@ -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> &gt; Build image
</rd-header-content>
<rd-header-content> <a ui-sref="docker.images">Images</a> &gt; 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>

70
app/docker/views/images/edit/image.html
View file

@ -1,4 +1,4 @@
<rd-header>
<rd-header>
<rd-header-title title-text="Image details"></rd-header-title>
<rd-header-content>
<a ui-sref="docker.images">Images</a> &gt; <a ui-sref="docker.images.image({id: image.Id})">{{ image.Id }}</a>
@ -13,8 +13,8 @@
<form class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="pull-left" ng-repeat="tag in image.RepoTags" style="display:table">
<div class="input-group col-md-1" style="padding:0 15px">
<div class="pull-left" ng-repeat="tag in image.RepoTags" style="display: table;">
<div class="input-group col-md-1" style="padding: 0 15px;">
<span class="input-group-addon">{{ tag }}</span>
<span class="input-group-btn" authorization="DockerImagePush, DockerImageCreate, DockerImageDelete">
<a data-toggle="tooltip" class="btn btn-primary interactive" title="Push to registry" ng-click="pushTag(tag)" authorization="DockerImagePush">
@ -34,9 +34,9 @@
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted">
Note: you can click on the upload icon <span class="fa fa-upload" aria-hidden="true"></span> to push an image
or on the download icon <span class="fa fa-download" aria-hidden="true"></span> to pull an image
or on the trash icon <span class="fa fa-trash-alt" aria-hidden="true"></span> to delete a tag.
Note: you can click on the upload icon <span class="fa fa-upload" aria-hidden="true"></span> to push an image or on the download icon
<span class="fa fa-download" aria-hidden="true"></span> to pull an image or on the trash icon <span class="fa fa-trash-alt" aria-hidden="true"></span> to delete a
tag.
</span>
</div>
<div class="col-sm-12">
@ -63,10 +63,7 @@
<rd-widget-body>
<form class="form-horizontal">
<!-- image-and-registry -->
<por-image-registry
model="formValues.RegistryModel"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<por-image-registry model="formValues.RegistryModel" label-class="col-sm-1" input-class="col-sm-11"></por-image-registry>
<!-- !image-and-registry -->
<!-- tag-note -->
<div class="form-group">
@ -97,29 +94,39 @@
<td>ID</td>
<td>
{{ image.Id }}
<button authorization="DockerImageDelete" class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this image</button>
<button authorization="DockerImageGet" class="btn btn-xs btn-primary" ng-click="exportImage(image)" button-spinner="$ctrl.exportInProgress" ng-disabled="state.exportInProgress">
<i class="fa fa-download space-right" aria-hidden="true"></i>
<span ng-hide="state.exportInProgress">Export this image</span>
<span ng-show="state.exportInProgress">Export in progress...</span>
<button authorization="DockerImageDelete" class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"
><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this image</button
>
<button
authorization="DockerImageGet"
class="btn btn-xs btn-primary"
ng-click="exportImage(image)"
button-spinner="$ctrl.exportInProgress"
ng-disabled="state.exportInProgress"
>
<i class="fa fa-download space-right" aria-hidden="true"></i>
<span ng-hide="state.exportInProgress">Export this image</span>
<span ng-show="state.exportInProgress">Export in progress...</span>
</button>
</td>
</tr>
<tr ng-if="image.Parent">
<td>Parent</td>
<td><a ui-sref="docker.images.image({id: image.Parent})">{{ image.Parent }}</a></td>
<td
><a ui-sref="docker.images.image({id: image.Parent})">{{ image.Parent }}</a></td
>
</tr>
<tr>
<td>Size</td>
<td>{{ image.VirtualSize|humansize }}</td>
<td>{{ image.VirtualSize | humansize }}</td>
</tr>
<tr>
<td>Created</td>
<td>{{ image.Created|getisodate }}</td>
<td>{{ image.Created | getisodate }}</td>
</tr>
<tr>
<td>Build</td>
<td>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
<td>Docker {{ image.DockerVersion }} on {{ image.Os }}, {{ image.Architecture }}</td>
</tr>
<tr ng-if="image.Author">
<td>Author</td>
@ -141,11 +148,15 @@
<tbody>
<tr>
<td>CMD</td>
<td><code>{{ image.Command|command }}</code></td>
<td
><code>{{ image.Command | command }}</code></td
>
</tr>
<tr ng-if="image.Entrypoint">
<td>ENTRYPOINT</td>
<td><code>{{ image.Entrypoint|command }}</code></td>
<td
><code>{{ image.Entrypoint | command }}</code></td
>
</tr>
<tr ng-if="image.ExposedPorts.length > 0">
<td>EXPOSE</td>
@ -179,7 +190,6 @@
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="history.length > 0">
<div class="col-lg-12 col-md-12 col-xs-12">
@ -188,7 +198,7 @@
<rd-widget-body classes="no-padding">
<table id="image-layers" class="table">
<thead>
<th style="white-space:nowrap;">
<th style="white-space: nowrap;">
<a ng-click="order('Order')">
Order
<span ng-show="sortType == 'Order' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
@ -212,28 +222,28 @@
</thead>
<tbody>
<tr ng-repeat="layer in history | orderBy:sortType:sortReverse">
<td style="white-space:nowrap;">
<td style="white-space: nowrap;">
{{ layer.Order }}
</td>
<td style="white-space:nowrap;">
<td style="white-space: nowrap;">
{{ layer.Size | humansize }}
</td>
<td class="expand">
<div ng-if="layer.CreatedBy.length > 130">
<span id="layer-command-{{$index}}-full" style="display: none">
<span id="layer-command-{{ $index }}-full" style="display: none;">
{{ layer.CreatedBy | imagelayercommand }}
</span>
<span id="layer-command-{{$index}}-short">
{{ layer.CreatedBy | imagelayercommand | truncate:130 }}
<span id="layer-command-{{ $index }}-short">
{{ layer.CreatedBy | imagelayercommand | truncate: 130 }}
<span ng-if="layer.CreatedBy.length > 130" style="margin-left: 5px;">
<a id="layer-command-expander{{$index}}" class="btn" ng-click='toggleLayerCommand($index)'>
<a id="layer-command-expander{{ $index }}" class="btn" ng-click="toggleLayerCommand($index)">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</span>
</span>
</div>
<div ng-if="layer.CreatedBy.length <= 130">
<span id="layer-command-{{$index}}-full">
<span id="layer-command-{{ $index }}-full">
{{ layer.CreatedBy | imagelayercommand }}
</span>
</div>

281
app/docker/views/images/edit/imageController.js
View file

@ -1,152 +1,167 @@
import _ from 'lodash-es';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
angular.module('portainer.docker')
.controller('ImageController', ['$q', '$scope', '$transition$', '$state', '$timeout', 'ImageService', 'ImageHelper', 'RegistryService', 'Notifications', 'HttpRequestHelper', 'ModalService', 'FileSaver', 'Blob',
function ($q, $scope, $transition$, $state, $timeout, ImageService, ImageHelper, RegistryService, Notifications, HttpRequestHelper, ModalService, FileSaver, Blob) {
$scope.formValues = {
RegistryModel: new PorImageRegistryModel()
};
angular.module('portainer.docker').controller('ImageController', [
'$q',
'$scope',
'$transition$',
'$state',
'$timeout',
'ImageService',
'ImageHelper',
'RegistryService',
'Notifications',
'HttpRequestHelper',
'ModalService',
'FileSaver',
'Blob',
function ($q, $scope, $transition$, $state, $timeout, ImageService, ImageHelper, RegistryService, Notifications, HttpRequestHelper, ModalService, FileSaver, Blob) {
$scope.formValues = {
RegistryModel: new PorImageRegistryModel(),
};
$scope.state = {
exportInProgress: false
};
$scope.state = {
exportInProgress: false,
};
$scope.sortType = 'Order';
$scope.sortReverse = false;
$scope.sortType = 'Order';
$scope.sortReverse = false;
$scope.order = function(sortType) {
$scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
$scope.sortType = sortType;
};
$scope.order = function (sortType) {
$scope.sortReverse = $scope.sortType === sortType ? !$scope.sortReverse : false;
$scope.sortType = sortType;
};
$scope.toggleLayerCommand = function(layerId) {
$('#layer-command-expander'+layerId+' span').toggleClass('glyphicon-plus-sign glyphicon-minus-sign');
$('#layer-command-'+layerId+'-short').toggle();
$('#layer-command-'+layerId+'-full').toggle();
};
$scope.toggleLayerCommand = function (layerId) {
$('#layer-command-expander' + layerId + ' span').toggleClass('glyphicon-plus-sign glyphicon-minus-sign');
$('#layer-command-' + layerId + '-short').toggle();
$('#layer-command-' + layerId + '-full').toggle();
};
$scope.tagImage = function() {
const registryModel = $scope.formValues.RegistryModel;
$scope.tagImage = function () {
const registryModel = $scope.formValues.RegistryModel;
const image = ImageHelper.createImageConfigForContainer(registryModel);
const image = ImageHelper.createImageConfigForContainer(registryModel);
ImageService.tagImage($transition$.params().id, image.fromImage)
.then(function success() {
Notifications.success('Image successfully tagged');
$state.go('docker.images.image', {id: $transition$.params().id}, {reload: true});
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to tag image');
});
};
ImageService.tagImage($transition$.params().id, image.fromImage)
.then(function success() {
Notifications.success('Image successfully tagged');
$state.go('docker.images.image', { id: $transition$.params().id }, { reload: true });
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to tag image');
});
};
$scope.pushTag = function(repository) {
$('#uploadResourceHint').show();
RegistryService.retrievePorRegistryModelFromRepository(repository)
.then(function success(registryModel) {
return ImageService.pushImage(registryModel);
})
.then(function success() {
Notifications.success('Image successfully pushed', repository);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to push image to repository');
})
.finally(function final() {
$('#uploadResourceHint').hide();
});
};
$scope.pushTag = function (repository) {
$('#uploadResourceHint').show();
RegistryService.retrievePorRegistryModelFromRepository(repository)
.then(function success(registryModel) {
return ImageService.pushImage(registryModel);
})
.then(function success() {
Notifications.success('Image successfully pushed', repository);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to push image to repository');
})
.finally(function final() {
$('#uploadResourceHint').hide();
});
};
$scope.pullTag = function(repository) {
$('#downloadResourceHint').show();
RegistryService.retrievePorRegistryModelFromRepository(repository)
.then(function success(registryModel) {
return ImageService.pullImage(registryModel, false);
})
.then(function success() {
Notifications.success('Image successfully pulled', repository);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to pull image');
})
.finally(function final() {
$('#downloadResourceHint').hide();
});
};
$scope.pullTag = function (repository) {
$('#downloadResourceHint').show();
RegistryService.retrievePorRegistryModelFromRepository(repository)
.then(function success(registryModel) {
return ImageService.pullImage(registryModel, false);
})
.then(function success() {
Notifications.success('Image successfully pulled', repository);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to pull image');
})
.finally(function final() {
$('#downloadResourceHint').hide();
});
};
$scope.removeTag = function(repository) {
ImageService.deleteImage(repository, false)
.then(function success() {
if ($scope.image.RepoTags.length === 1) {
Notifications.success('Image successfully deleted', repository);
$state.go('docker.images', {}, {reload: true});
} else {
Notifications.success('Tag successfully deleted', repository);
$state.go('docker.images.image', {id: $transition$.params().id}, {reload: true});
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove image');
});
};
$scope.removeTag = function (repository) {
ImageService.deleteImage(repository, false)
.then(function success() {
if ($scope.image.RepoTags.length === 1) {
Notifications.success('Image successfully deleted', repository);
$state.go('docker.images', {}, { reload: true });
} else {
Notifications.success('Tag successfully deleted', repository);
$state.go('docker.images.image', { id: $transition$.params().id }, { reload: true });
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove image');
});
};
$scope.removeImage = function (id) {
ImageService.deleteImage(id, false)
.then(function success() {
Notifications.success('Image successfully deleted', id);
$state.go('docker.images', {}, {reload: true});
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove image');
});
};
$scope.removeImage = function (id) {
ImageService.deleteImage(id, false)
.then(function success() {
Notifications.success('Image successfully deleted', id);
$state.go('docker.images', {}, { reload: true });
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove image');
});
};
function exportImage(image) {
HttpRequestHelper.setPortainerAgentTargetHeader(image.NodeName);
$scope.state.exportInProgress = true;
ImageService.downloadImages([image])
.then(function success(data) {
var downloadData = new Blob([data.file], { type: 'application/x-tar' });
FileSaver.saveAs(downloadData, 'images.tar');
Notifications.success('Image successfully downloaded');
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to download image');
})
.finally(function final() {
$scope.state.exportInProgress = false;
});
}
function exportImage(image) {
HttpRequestHelper.setPortainerAgentTargetHeader(image.NodeName);
$scope.state.exportInProgress = true;
ImageService.downloadImages([image])
.then(function success(data) {
var downloadData = new Blob([data.file], { type: 'application/x-tar' });
FileSaver.saveAs(downloadData, 'images.tar');
Notifications.success('Image successfully downloaded');
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to download image');
})
.finally(function final() {
$scope.state.exportInProgress = false;
});
}
$scope.exportImage = function (image) {
if (image.RepoTags.length === 0 || _.includes(image.RepoTags, '<none>')) {
Notifications.warning('', 'Cannot download a untagged image');
return;
}
$scope.exportImage = function (image) {
if (image.RepoTags.length === 0 || _.includes(image.RepoTags, '<none>')) {
Notifications.warning('', 'Cannot download a untagged image');
return;
}
ModalService.confirmImageExport(function (confirmed) {
if(!confirmed) { return; }
exportImage(image);
});
};
ModalService.confirmImageExport(function (confirmed) {
if (!confirmed) {
return;
}
exportImage(image);
});
};
function initView() {
HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
var endpointProvider = $scope.applicationState.endpoint.mode.provider;
$q.all({
image: ImageService.image($transition$.params().id),
history: endpointProvider !== 'VMWARE_VIC' ? ImageService.history($transition$.params().id) : []
})
.then(function success(data) {
$scope.image = data.image;
$scope.history = data.history;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve image details');
$state.go('docker.images');
});
}
function initView() {
HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
var endpointProvider = $scope.applicationState.endpoint.mode.provider;
$q.all({
image: ImageService.image($transition$.params().id),
history: endpointProvider !== 'VMWARE_VIC' ? ImageService.history($transition$.params().id) : [],
})
.then(function success(data) {
$scope.image = data.image;
$scope.history = data.history;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve image details');
$state.go('docker.images');
});
}
initView();
}]);
initView();
},
]);

44
app/docker/views/images/images.html
View file

@ -10,31 +10,29 @@
<div class="row" ng-if="!offlineMode" authorization="DockerImageCreate">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-download" title-text="Pull image ">
</rd-widget-header>
<rd-widget-header icon="fa-download" title-text="Pull image "> </rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<!-- image-and-registry -->
<por-image-registry
model="formValues.RegistryModel"
auto-complete="true"
pull-warning="true"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<por-image-registry model="formValues.RegistryModel" auto-complete="true" pull-warning="true" label-class="col-sm-1" input-class="col-sm-11"></por-image-registry>
<!-- !image-and-registry -->
<div ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<div class="col-sm-12 form-section-title">
Deployment
</div>
<!-- node-selection -->
<node-selector
model="formValues.NodeName">
</node-selector>
<node-selector model="formValues.NodeName"> </node-selector>
<!-- !node-selection -->
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image" ng-click="pullImage()" button-spinner="state.actionInProgress">
<button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image"
ng-click="pullImage()"
button-spinner="state.actionInProgress"
>
<span ng-hide="state.actionInProgress">Pull the image</span>
<span ng-show="state.actionInProgress">Download in progress...</span>
</button>
@ -49,16 +47,18 @@
<div class="row">
<div class="col-sm-12">
<images-datatable
title-text="Images" title-icon="fa-clone"
dataset="images" table-key="images"
order-by="RepoTags"
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
download-action="downloadAction"
remove-action="removeAction"
force-remove-action="confirmRemovalAction"
export-in-progress="state.exportInProgress"
offline-mode="offlineMode"
refresh-callback="getImages"
title-text="Images"
title-icon="fa-clone"
dataset="images"
table-key="images"
order-by="RepoTags"
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
download-action="downloadAction"
remove-action="removeAction"
force-remove-action="confirmRemovalAction"
export-in-progress="state.exportInProgress"
offline-mode="offlineMode"
refresh-callback="getImages"
></images-datatable>
</div>
</div>

240
app/docker/views/images/imagesController.js
View file

@ -1,137 +1,149 @@
import _ from 'lodash-es';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
angular.module('portainer.docker')
.controller('ImagesController', ['$scope', '$state', 'ImageService', 'Notifications', 'ModalService', 'HttpRequestHelper', 'FileSaver', 'Blob', 'EndpointProvider',
function ($scope, $state, ImageService, Notifications, ModalService, HttpRequestHelper, FileSaver, Blob, EndpointProvider) {
$scope.state = {
actionInProgress: false,
exportInProgress: false
};
angular.module('portainer.docker').controller('ImagesController', [
'$scope',
'$state',
'ImageService',
'Notifications',
'ModalService',
'HttpRequestHelper',
'FileSaver',
'Blob',
'EndpointProvider',
function ($scope, $state, ImageService, Notifications, ModalService, HttpRequestHelper, FileSaver, Blob, EndpointProvider) {
$scope.state = {
actionInProgress: false,
exportInProgress: false,
};
$scope.formValues = {
RegistryModel: new PorImageRegistryModel(),
NodeName: null
};
$scope.formValues = {
RegistryModel: new PorImageRegistryModel(),
NodeName: null,
};
$scope.pullImage = function() {
const registryModel = $scope.formValues.RegistryModel;
$scope.pullImage = function () {
const registryModel = $scope.formValues.RegistryModel;
var nodeName = $scope.formValues.NodeName;
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
var nodeName = $scope.formValues.NodeName;
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
$scope.state.actionInProgress = true;
ImageService.pullImage(registryModel, false)
.then(function success() {
Notifications.success('Image successfully pulled', registryModel.Image);
$state.reload();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to pull image');
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
};
$scope.state.actionInProgress = true;
ImageService.pullImage(registryModel, false)
.then(function success() {
Notifications.success('Image successfully pulled', registryModel.Image);
$state.reload();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to pull image');
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
};
$scope.confirmRemovalAction = function (selectedItems, force) {
ModalService.confirmImageForceRemoval(function (confirmed) {
if(!confirmed) { return; }
$scope.removeAction(selectedItems, force);
});
};
function isAuthorizedToDownload(selectedItems) {
for (var i = 0; i < selectedItems.length; i++) {
var image = selectedItems[i];
var untagged = _.find(image.RepoTags, function (item) {
return item.indexOf('<none>') > -1;
$scope.confirmRemovalAction = function (selectedItems, force) {
ModalService.confirmImageForceRemoval(function (confirmed) {
if (!confirmed) {
return;
}
$scope.removeAction(selectedItems, force);
});
};
if (untagged) {
Notifications.warning('', 'Cannot download a untagged image');
function isAuthorizedToDownload(selectedItems) {
for (var i = 0; i < selectedItems.length; i++) {
var image = selectedItems[i];
var untagged = _.find(image.RepoTags, function (item) {
return item.indexOf('<none>') > -1;
});
if (untagged) {
Notifications.warning('', 'Cannot download a untagged image');
return false;
}
}
if (_.uniqBy(selectedItems, 'NodeName').length > 1) {
Notifications.warning('', 'Cannot download images from different nodes at the same time');
return false;
}
return true;
}
if (_.uniqBy(selectedItems, 'NodeName').length > 1) {
Notifications.warning('', 'Cannot download images from different nodes at the same time');
return false;
function exportImages(images) {
HttpRequestHelper.setPortainerAgentTargetHeader(images[0].NodeName);
$scope.state.exportInProgress = true;
ImageService.downloadImages(images)
.then(function success(data) {
var downloadData = new Blob([data.file], { type: 'application/x-tar' });
FileSaver.saveAs(downloadData, 'images.tar');
Notifications.success('Image(s) successfully downloaded');
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to download image(s)');
})
.finally(function final() {
$scope.state.exportInProgress = false;
});
}
return true;
}
$scope.downloadAction = function (selectedItems) {
if (!isAuthorizedToDownload(selectedItems)) {
return;
}
function exportImages(images) {
HttpRequestHelper.setPortainerAgentTargetHeader(images[0].NodeName);
$scope.state.exportInProgress = true;
ImageService.downloadImages(images)
.then(function success(data) {
var downloadData = new Blob([data.file], { type: 'application/x-tar' });
FileSaver.saveAs(downloadData, 'images.tar');
Notifications.success('Image(s) successfully downloaded');
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to download image(s)');
})
.finally(function final() {
$scope.state.exportInProgress = false;
});
}
$scope.downloadAction = function (selectedItems) {
if (!isAuthorizedToDownload(selectedItems)) {
return;
}
ModalService.confirmImageExport(function (confirmed) {
if(!confirmed) { return; }
exportImages(selectedItems);
});
};
$scope.removeAction = function (selectedItems, force) {
var actionCount = selectedItems.length;
angular.forEach(selectedItems, function (image) {
HttpRequestHelper.setPortainerAgentTargetHeader(image.NodeName);
ImageService.deleteImage(image.Id, force)
.then(function success() {
Notifications.success('Image successfully removed', image.Id);
var index = $scope.images.indexOf(image);
$scope.images.splice(index, 1);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove image');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
ModalService.confirmImageExport(function (confirmed) {
if (!confirmed) {
return;
}
exportImages(selectedItems);
});
});
};
};
$scope.offlineMode = false;
$scope.removeAction = function (selectedItems, force) {
var actionCount = selectedItems.length;
angular.forEach(selectedItems, function (image) {
HttpRequestHelper.setPortainerAgentTargetHeader(image.NodeName);
ImageService.deleteImage(image.Id, force)
.then(function success() {
Notifications.success('Image successfully removed', image.Id);
var index = $scope.images.indexOf(image);
$scope.images.splice(index, 1);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove image');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
};
$scope.getImages = getImages;
function getImages() {
ImageService.images(true)
.then(function success(data) {
$scope.images = data;
$scope.offlineMode = EndpointProvider.offlineMode();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve images');
$scope.images = [];
});
}
$scope.offlineMode = false;
function initView() {
getImages();
}
$scope.getImages = getImages;
function getImages() {
ImageService.images(true)
.then(function success(data) {
$scope.images = data;
$scope.offlineMode = EndpointProvider.offlineMode();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve images');
$scope.images = [];
});
}
initView();
}]);
function initView() {
getImages();
}
initView();
},
]);

60
app/docker/views/images/import/importImageController.js
View file

@ -1,31 +1,35 @@
angular.module('portainer.docker')
.controller('ImportImageController', ['$scope', '$state', 'ImageService', 'Notifications', 'HttpRequestHelper',
function ($scope, $state, ImageService, Notifications, HttpRequestHelper) {
angular.module('portainer.docker').controller('ImportImageController', [
'$scope',
'$state',
'ImageService',
'Notifications',
'HttpRequestHelper',
function ($scope, $state, ImageService, Notifications, HttpRequestHelper) {
$scope.state = {
actionInProgress: false,
};
$scope.state = {
actionInProgress: false
};
$scope.formValues = {
UploadFile: null,
NodeName: null,
};
$scope.formValues = {
UploadFile: null,
NodeName: null
};
$scope.uploadImage = function () {
$scope.state.actionInProgress = true;
$scope.uploadImage = function() {
$scope.state.actionInProgress = true;
var nodeName = $scope.formValues.NodeName;
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
var file = $scope.formValues.UploadFile;
ImageService.uploadImage(file)
.then(function success() {
Notifications.success('Images successfully uploaded');
})
.catch(function error(err) {
Notifications.error('Failure', err.message, 'Unable to upload image');
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
};
}]);
var nodeName = $scope.formValues.NodeName;
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
var file = $scope.formValues.UploadFile;
ImageService.uploadImage(file)
.then(function success() {
Notifications.success('Images successfully uploaded');
})
.catch(function error(err) {
Notifications.error('Failure', err.message, 'Unable to upload image');
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
};
},
]);

22
app/docker/views/images/import/importimage.html
View file

@ -1,8 +1,6 @@
<rd-header>
<rd-header-title title-text="Import image"></rd-header-title>
<rd-header-content>
<a ui-sref="docker.images">Images</a> &gt; Import image
</rd-header-content>
<rd-header-content> <a ui-sref="docker.images">Images</a> &gt; Import image </rd-header-content>
</rd-header>
<div class="row">
@ -21,7 +19,9 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-sm btn-primary" ngf-select ngf-min-size="10" ngf-accept="'application/x-tar,application/x-gzip'" ng-model="formValues.UploadFile">Select file</button>
<button class="btn btn-sm btn-primary" ngf-select ngf-min-size="10" ngf-accept="'application/x-tar,application/x-gzip'" ng-model="formValues.UploadFile"
>Select file</button
>
<span style="margin-left: 5px;">
{{ formValues.UploadFile.name }}
<i class="fa fa-times red-icon" ng-if="!formValues.UploadFile" aria-hidden="true"></i>
@ -34,8 +34,7 @@
Deployment
</div>
<!-- node-selection -->
<node-selector model="formValues.NodeName">
</node-selector>
<node-selector model="formValues.NodeName"> </node-selector>
<!-- !node-selection -->
</div>
<!-- actions -->
@ -44,8 +43,13 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.UploadFile"
ng-click="uploadImage()" button-spinner="state.actionInProgress">
<button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="state.actionInProgress || !formValues.UploadFile"
ng-click="uploadImage()"
button-spinner="state.actionInProgress"
>
<span ng-hide="state.actionInProgress">Upload</span>
<span ng-show="state.actionInProgress">Images uploading in progress...</span>
</button>
@ -57,4 +61,4 @@
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>