mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 05:45:22 +02:00
Rdash theme integration (#1)
* Adding latest build to dist. * Adding latest build to dist. * Bump other app version. * Build latest changes. * Bump version to 0.7.0. * Version bump to 0.9.0-beta and remote API 1.20. * Whoah there, back down to 0.8.0-beta. * Merge branch 'crosbymichael-master' into crosbymichael-dist * Add volume options in volume creation form * display swarm cluster information in Swarm tab * update LICENSE * update repository URL in status bar * remove console logs * do not display Swarm containers anywhere in the UI * update position for add/remove option on Volumes page * compliant with swarm == 1.2.0 API support * update nginx-basic-auth examples with latest nginx and swarm example * Updated .gitignore * update .gitignore * reverted entry for dist/uifordocker in .gitignore * WIP * fix linter issues * added logo * update repository URL * update .gitignore (ignore dist/*) * add lodash * add containers actions binding (start, stop...) * replace image icon * bind remove image action * bind network remove action * bind volume remove action * update logo * wip on container details * update logo scaling, favicon and page title * wip container view * add containers actions in container view * add image view * add network view * remove useless data in tables * add pull image, create network modals * add create volume modal * update style for createVolume options * add start container modal * create volume modal now use a select to display drivers * add container stats * add containerTop view in stats view * fix trimcontainername filter * add container logs view * updated .gitignore * remove useless files/modules * remove useless chart in image view * replace $location usage with $state.go * remove useless swarm example
This commit is contained in:
Anthony Lapenna
parent
1b206f223f
commit
0f51cb66e0
71 changed files with 2790 additions and 3211 deletions
|
|
@ -1,120 +1,92 @@
|
|||
<div ng-include="template" ng-controller="StartContainerController"></div>
|
||||
|
||||
<div class="alert alert-error" id="error-message" style="display:none">
|
||||
{{ error }}
|
||||
<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="detail">
|
||||
|
||||
<h4>Image: {{ id }}</h4>
|
||||
|
||||
<div class="btn-group detail">
|
||||
<button class="btn btn-success" data-toggle="modal" data-target="#create-modal">Start Container</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Containers created:</h4>
|
||||
<canvas id="containers-started-chart" width="750">
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
|
||||
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tags:</td>
|
||||
<td>
|
||||
<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>
|
||||
<ul>
|
||||
<li ng-repeat="tag in RepoTags">{{ tag }}
|
||||
<button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
|
||||
</li>
|
||||
<li ng-repeat="tag in RepoTags">{{ tag }}
|
||||
<button ng-click="removeImage(tag)" class="btn btn-sm btn-danger">Remove tag</button>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Created:</td>
|
||||
<td>{{ image.Created | date: 'medium'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Parent:</td>
|
||||
<td><a href="#/images/{{ image.Parent }}/">{{ image.Parent }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Size (Virtual Size):</td>
|
||||
<td>{{ image.Size|humansize }} ({{ image.VirtualSize|humansize }})</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Parent</td>
|
||||
<td><a href="#/images/{{ 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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User:</td>
|
||||
<td>{{ image.ContainerConfig.User }}</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>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span1">
|
||||
History:
|
||||
</div>
|
||||
<div class="span5">
|
||||
<i class="icon-refresh" style="width:32px;height:32px;" ng-click="getHistory()"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="well well-large">
|
||||
<ul>
|
||||
<li ng-repeat="change in history">
|
||||
<strong>{{ change.Id }}</strong>: Created: {{ change.Created|getdate }} Created by: {{ change.CreatedBy
|
||||
}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="row-fluid">
|
||||
<form class="form-inline" role="form">
|
||||
<fieldset>
|
||||
<legend>Tag image</legend>
|
||||
<div class="form-group">
|
||||
<label>Tag:</label>
|
||||
<input type="text" placeholder="repo" ng-model="tagInfo.repo" class="form-control">
|
||||
<input type="text" placeholder="version" ng-model="tagInfo.version" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" ng-model="tagInfo.force" class="form-control"/> Force?
|
||||
</label>
|
||||
</div>
|
||||
<input type="button" ng-click="addTag()" value="Add Tag" class="btn btn-primary"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="btn-remove">
|
||||
<button class="btn btn-large btn-block btn-primary btn-danger" ng-click="removeImage(id)">Remove Image</button>
|
||||
</div>
|
||||
<tr>
|
||||
<td>Hostname</td>
|
||||
<td>{{ image.ContainerConfig.Hostname }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User</td>
|
||||
<td>{{ image.ContainerConfig.User }}</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>Docker {{ image.DockerVersion }} on {{ image.Os}}, {{ image.Architecture }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,106 +1,58 @@
|
|||
angular.module('image', [])
|
||||
.controller('ImageController', ['$scope', '$q', '$routeParams', '$location', 'Image', 'Container', 'Messages', 'LineChart',
|
||||
function ($scope, $q, $routeParams, $location, Image, Container, Messages, LineChart) {
|
||||
$scope.history = [];
|
||||
$scope.tagInfo = {repo: '', version: '', force: false};
|
||||
$scope.id = '';
|
||||
$scope.repoTags = [];
|
||||
.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 = [];
|
||||
|
||||
$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) {
|
||||
$location.path('/images');
|
||||
} else {
|
||||
$location.path('/images/' + $scope.id); // Refresh the current page.
|
||||
}
|
||||
}, function (e) {
|
||||
$scope.error = e.data;
|
||||
$('#error-message').show();
|
||||
});
|
||||
};
|
||||
$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();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.getHistory = function () {
|
||||
Image.history({id: $routeParams.id}, function (d) {
|
||||
$scope.history = d;
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
function getRepoTags(imageId) {
|
||||
Image.query({}, function (d) {
|
||||
d.forEach(function(image) {
|
||||
if (image.Id === imageId && image.RepoTags[0] !== '<none>:<none>') {
|
||||
$scope.RepoTags = image.RepoTags;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$scope.addTag = function () {
|
||||
var tag = $scope.tagInfo;
|
||||
Image.tag({
|
||||
id: $routeParams.id,
|
||||
repo: tag.repo,
|
||||
tag: tag.version,
|
||||
force: tag.force ? 1 : 0
|
||||
}, function (d) {
|
||||
Messages.send("Tag Added", $routeParams.id);
|
||||
$location.path('/images/' + $scope.id);
|
||||
}, function (e) {
|
||||
$scope.error = e.data;
|
||||
$('#error-message').show();
|
||||
});
|
||||
};
|
||||
|
||||
function getContainersFromImage($q, Container, imageId) {
|
||||
var defer = $q.defer();
|
||||
|
||||
Container.query({all: 1, notruc: 1}, function (d) {
|
||||
var containers = [];
|
||||
for (var i = 0; i < d.length; i++) {
|
||||
var c = d[i];
|
||||
if (c.ImageID === imageId) {
|
||||
containers.push(new ContainerViewModel(c));
|
||||
}
|
||||
}
|
||||
defer.resolve(containers);
|
||||
});
|
||||
|
||||
return defer.promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
function getRepoTags(imageId) {
|
||||
Image.query({}, function (d) {
|
||||
d.forEach(function(image) {
|
||||
if (image.Id === imageId && image.RepoTags[0] !== '<none>:<none>') {
|
||||
$scope.RepoTags = image.RepoTags;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Image.get({id: $routeParams.id}, function (d) {
|
||||
$scope.image = d;
|
||||
$scope.id = d.Id;
|
||||
if (d.RepoTags) {
|
||||
$scope.RepoTags = d.RepoTags;
|
||||
} else {
|
||||
getRepoTags($scope.id);
|
||||
}
|
||||
|
||||
getContainersFromImage($q, Container, $scope.id).then(function (containers) {
|
||||
LineChart.build('#containers-started-chart', containers, function (c) {
|
||||
return new Date(c.Created * 1000).toLocaleDateString();
|
||||
});
|
||||
});
|
||||
}, function (e) {
|
||||
if (e.status === 404) {
|
||||
$('.detail').hide();
|
||||
$scope.error = "Image not found.<br />" + $routeParams.id;
|
||||
} else {
|
||||
$scope.error = e.data;
|
||||
}
|
||||
$('#error-message').show();
|
||||
});
|
||||
|
||||
$scope.getHistory();
|
||||
}]);
|
||||
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);
|
||||
}
|
||||
}, function (e) {
|
||||
if (e.status === 404) {
|
||||
$('.detail').hide();
|
||||
$scope.error = "Image not found.<br />" + $stateParams.id;
|
||||
} else {
|
||||
$scope.error = e.data;
|
||||
}
|
||||
$('#error-message').show();
|
||||
});
|
||||
}]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue