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,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> > <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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue