mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 12:25:22 +02:00
merge branch 'refactor-image-view' into internal
This commit is contained in:
Anthony Lapenna
commit
01a707c8e7
6 changed files with 198 additions and 117 deletions
|
|
@ -1,97 +1,115 @@
|
|||
<rd-header>
|
||||
<rd-header-title title="Image details"></rd-header-title>
|
||||
<rd-header-title title="Image details">
|
||||
<i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
|
||||
</rd-header-title>
|
||||
<rd-header-content>
|
||||
Images > <a ui-sref="image({id: id})">{{ id }}</a>
|
||||
Images > <a ui-sref="image({id: image.Id})">{{ image.Id }}</a>
|
||||
</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
<div class="row" ng-if="RepoTags.length > 0">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa fa-tags" title="Image tags"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div style="margin: 5px 10px;">
|
||||
<span ng-repeat="tag in RepoTags" class="label label-primary image-tag">{{ tag }}
|
||||
<a data-toggle="tooltip" class="interactive" title="Remove tag" ng-click="removeImage(tag)">
|
||||
<i class="fa fa-trash-o white-icon" aria-hidden="true"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin: 5px 10px;">
|
||||
<span class="small text-muted">Note: you can click on the trash icon to delete a tag</span>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon grey pull-left">
|
||||
<i class="fa fa-clone"></i>
|
||||
</div>
|
||||
<div class="title">{{ id }}</div>
|
||||
<div class="comment">Image ID</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon grey pull-left">
|
||||
<i class="fa fa-cogs"></i>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="btn-group" role="group" aria-label="...">
|
||||
<button class="btn btn-danger" ng-click="removeImage(id)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
Actions
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-clone" title="Image details"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Created</td>
|
||||
<td>{{ image.Created | date: 'medium'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tags</td>
|
||||
<td>ID</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li ng-repeat="tag in RepoTags">{{ tag }}
|
||||
<button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
|
||||
</li>
|
||||
</ul>
|
||||
{{ image.Id }}
|
||||
<button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)">Delete this image</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr ng-if="image.Parent">
|
||||
<td>Parent</td>
|
||||
<td><a ui-sref="image({id: image.Parent})">{{ image.Parent }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Size (Virtual Size)</td>
|
||||
<td>{{ image.Size|humansize }} ({{ image.VirtualSize|humansize }})</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Hostname</td>
|
||||
<td>{{ image.ContainerConfig.Hostname }}</td>
|
||||
<td>Size</td>
|
||||
<td>{{ image.VirtualSize|humansize }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User</td>
|
||||
<td>{{ image.ContainerConfig.User }}</td>
|
||||
<td>Created</td>
|
||||
<td>{{ image.Created|getisodate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cmd</td>
|
||||
<td>{{ image.ContainerConfig.Cmd }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Volumes</td>
|
||||
<td>{{ image.ContainerConfig.Volumes }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Volumes from</td>
|
||||
<td>{{ image.ContainerConfig.VolumesFrom }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Built with</td>
|
||||
<td>Build</td>
|
||||
<td>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
|
||||
</tr>
|
||||
<tr ng-if="image.Author">
|
||||
<td>Author</td>
|
||||
<td>{{ image.Author }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-clone" title="Dockerfile details"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CMD</td>
|
||||
<td><code>{{ image.ContainerConfig.Cmd|command }}</code></td>
|
||||
</tr>
|
||||
<tr ng-if="image.ContainerConfig.Entrypoint">
|
||||
<td>ENTRYPOINT</td>
|
||||
<td><code>{{ image.ContainerConfig.Entrypoint|command }}</code></td>
|
||||
</tr>
|
||||
<tr ng-if="image.ContainerConfig.ExposedPorts">
|
||||
<td>EXPOSE</td>
|
||||
<td>
|
||||
<span class="label label-default tag" ng-repeat="port in exposedPorts">
|
||||
{{ port }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="image.ContainerConfig.Volumes">
|
||||
<td>VOLUME</td>
|
||||
<td>
|
||||
<span class="label label-default tag" ng-repeat="volume in volumes">
|
||||
{{ volume }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ENV</td>
|
||||
<td>
|
||||
<table class="table table-bordered table-condensed">
|
||||
<tr ng-repeat="var in image.ContainerConfig.Env">
|
||||
<td>{{ var|key }}</td>
|
||||
<td>{{ var|value }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,10 @@
|
|||
angular.module('image', [])
|
||||
.controller('ImageController', ['$scope', '$q', '$stateParams', '$state', 'Image', 'Container', 'Messages', 'LineChart',
|
||||
function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChart) {
|
||||
$scope.tagInfo = {repo: '', version: '', force: false};
|
||||
$scope.id = '';
|
||||
$scope.repoTags = [];
|
||||
.controller('ImageController', ['$scope', '$stateParams', '$state', 'Image', 'Messages',
|
||||
function ($scope, $stateParams, $state, Image, Messages) {
|
||||
$scope.RepoTags = [];
|
||||
|
||||
$scope.removeImage = function (id) {
|
||||
Image.remove({id: id}, function (d) {
|
||||
d.forEach(function(msg){
|
||||
var key = Object.keys(msg)[0];
|
||||
Messages.send(key, msg[key]);
|
||||
});
|
||||
// If last message key is 'Deleted' then assume the image is gone and send to images page
|
||||
if (d[d.length-1].Deleted) {
|
||||
$state.go('images', {}, {reload: true});
|
||||
} else {
|
||||
$state.go('image', {id: $scope.id}, {reload: true});
|
||||
}
|
||||
}, function (e) {
|
||||
$scope.error = e.data;
|
||||
$('#error-message').show();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get RepoTags from the /images/query endpoint instead of /image/json,
|
||||
* for backwards compatibility with Docker API versions older than 1.21
|
||||
* @param {string} imageId
|
||||
*/
|
||||
// Get RepoTags from the /images/query endpoint instead of /image/json,
|
||||
// for backwards compatibility with Docker API versions older than 1.21
|
||||
function getRepoTags(imageId) {
|
||||
Image.query({}, function (d) {
|
||||
d.forEach(function(image) {
|
||||
|
|
@ -38,21 +15,45 @@ function ($scope, $q, $stateParams, $state, Image, Container, Messages, LineChar
|
|||
});
|
||||
}
|
||||
|
||||
$scope.removeImage = function (id) {
|
||||
$('#loadingViewSpinner').show();
|
||||
Image.remove({id: id}, function (d) {
|
||||
if (d[0].message) {
|
||||
$('#loadingViewSpinner').hide();
|
||||
Messages.error("Unable to remove image", d[0].message);
|
||||
} else {
|
||||
// If last message key is 'Deleted' or if it's 'Untagged' and there is only one tag associated to the image
|
||||
// then assume the image is gone and send to images page
|
||||
if (d[d.length-1].Deleted || (d[d.length-1].Untagged && $scope.RepoTags.length === 1)) {
|
||||
Messages.send('Image successfully deleted');
|
||||
$state.go('images', {}, {reload: true});
|
||||
} else {
|
||||
Messages.send('Tag successfully deleted');
|
||||
$state.go('image', {id: $stateParams.id}, {reload: true});
|
||||
}
|
||||
}
|
||||
}, function (e) {
|
||||
$('#loadingViewSpinner').hide();
|
||||
Messages.error("Unable to remove image", e.data);
|
||||
});
|
||||
};
|
||||
|
||||
$('#loadingViewSpinner').show();
|
||||
Image.get({id: $stateParams.id}, function (d) {
|
||||
$scope.image = d;
|
||||
$scope.id = d.Id;
|
||||
if (d.RepoTags) {
|
||||
$scope.RepoTags = d.RepoTags;
|
||||
} else {
|
||||
getRepoTags($scope.id);
|
||||
getRepoTags(d.Id);
|
||||
}
|
||||
$('#loadingViewSpinner').hide();
|
||||
$scope.exposedPorts = d.ContainerConfig.ExposedPorts ? Object.keys(d.ContainerConfig.ExposedPorts) : [];
|
||||
$scope.volumes = d.ContainerConfig.Volumes ? Object.keys(d.ContainerConfig.Volumes) : [];
|
||||
}, function (e) {
|
||||
if (e.status === 404) {
|
||||
$('.detail').hide();
|
||||
$scope.error = "Image not found.<br />" + $stateParams.id;
|
||||
Messages.error("Unable to find image", $stateParams.id);
|
||||
} else {
|
||||
$scope.error = e.data;
|
||||
Messages.error("Unable to retrieve image info", e.data);
|
||||
}
|
||||
$('#error-message').show();
|
||||
});
|
||||
}]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue