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,76 +1,82 @@
|
|||
<div ng-include="template" ng-controller="StartContainerController"></div>
|
||||
|
||||
<h2>Containers:</h2>
|
||||
|
||||
<div>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="restartAction()">Restart</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="pauseAction()">Pause</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="unpauseAction()">Unpause</a></li>
|
||||
<li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="pull-right form-inline">
|
||||
<input type="checkbox" ng-model="displayAll" id="displayAll" ng-change="toggleGetAll()"/> <label for="displayAll">Display All</label>
|
||||
<input type="text" class="form-control" style="vertical-align: center" id="filter" placeholder="Filter" ng-model="filter"/> <label class="sr-only" for="filter">Filter</label>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Select</label></th>
|
||||
<th>
|
||||
<div class="col-lg-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-tasks" title="Containers">
|
||||
</rd-widget-header>
|
||||
<rd-widget-taskbar classes="col-lg-12">
|
||||
<div class="pull-left">
|
||||
<div class="btn-group" role="group" aria-label="...">
|
||||
<button type="button" class="btn btn-primary" ng-click="startAction()" ng-disabled="!state.selectedItemCount">Start</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="stopAction()" ng-disabled="!state.selectedItemCount">Stop</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="killAction()" ng-disabled="!state.selectedItemCount">Kill</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="restartAction()" ng-disabled="!state.selectedItemCount">Restart</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount">Pause</button>
|
||||
<button type="button" class="btn btn-primary" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount">Unpause</button>
|
||||
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
|
||||
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-modal">Start a new container...</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<input type="checkbox" ng-model="state.displayAll" id="displayAll" ng-change="toggleGetAll()"/><label for="displayAll">Display All</label>
|
||||
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
|
||||
</div>
|
||||
</rd-widget-taskbar>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Names')">
|
||||
Name
|
||||
<span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
Name
|
||||
<span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Image')">
|
||||
Image
|
||||
<span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
Image
|
||||
<span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Command')">
|
||||
Command
|
||||
<span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
Command
|
||||
<span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Created')">
|
||||
Created
|
||||
<span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
Created
|
||||
<span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Status')">
|
||||
Status
|
||||
<span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
Status
|
||||
<span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="container in (filteredContainers = ( containers | filter:filter | orderBy:sortType:sortReverse))">
|
||||
<td><input type="checkbox" ng-model="container.Checked" /></td>
|
||||
<td><a href="#/containers/{{ container.Id }}/">{{ container|containername}}</a></td>
|
||||
<td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
|
||||
<td>{{ container.Command|truncate:40 }}</td>
|
||||
<td>{{ container.Created|getdate }}</td>
|
||||
<td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse))">
|
||||
<td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
|
||||
<td><a href="#/containers/{{ container.Id }}">{{ container|containername}}</a></td>
|
||||
<td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
|
||||
<td>{{ container.Command|truncate:40 }}</td>
|
||||
<td>{{ container.Created|getdate }}</td>
|
||||
<td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
<rd-widget>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,118 +1,138 @@
|
|||
angular.module('containers', [])
|
||||
.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
|
||||
function ($scope, Container, Settings, Messages, ViewSpinner) {
|
||||
$scope.sortType = 'Created';
|
||||
$scope.sortReverse = true;
|
||||
$scope.toggle = false;
|
||||
$scope.displayAll = Settings.displayAll;
|
||||
.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
|
||||
function ($scope, Container, Settings, Messages, ViewSpinner) {
|
||||
|
||||
$scope.order = function (sortType) {
|
||||
$scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
|
||||
$scope.sortType = sortType;
|
||||
};
|
||||
$scope.state = {};
|
||||
$scope.state.displayAll = Settings.displayAll;
|
||||
$scope.sortType = 'Created';
|
||||
$scope.sortReverse = true;
|
||||
$scope.state.toggle = false;
|
||||
$scope.state.selectedItemCount = 0;
|
||||
|
||||
var update = function (data) {
|
||||
ViewSpinner.spin();
|
||||
Container.query(data, function (d) {
|
||||
$scope.containers = d.map(function (item) {
|
||||
return new ContainerViewModel(item);
|
||||
});
|
||||
ViewSpinner.stop();
|
||||
});
|
||||
};
|
||||
$scope.order = function (sortType) {
|
||||
$scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
|
||||
$scope.sortType = sortType;
|
||||
};
|
||||
|
||||
var batch = function (items, action, msg) {
|
||||
ViewSpinner.spin();
|
||||
var counter = 0;
|
||||
var complete = function () {
|
||||
counter = counter - 1;
|
||||
if (counter === 0) {
|
||||
ViewSpinner.stop();
|
||||
update({all: Settings.displayAll ? 1 : 0});
|
||||
}
|
||||
};
|
||||
angular.forEach(items, function (c) {
|
||||
if (c.Checked) {
|
||||
if (action === Container.start) {
|
||||
Container.get({id: c.Id}, function (d) {
|
||||
c = d;
|
||||
counter = counter + 1;
|
||||
action({id: c.Id, HostConfig: c.HostConfig || {}}, function (d) {
|
||||
Messages.send("Container " + msg, c.Id);
|
||||
var index = $scope.containers.indexOf(c);
|
||||
complete();
|
||||
}, function (e) {
|
||||
Messages.error("Failure", e.data);
|
||||
complete();
|
||||
});
|
||||
}, function (e) {
|
||||
if (e.status === 404) {
|
||||
$('.detail').hide();
|
||||
Messages.error("Not found", "Container not found.");
|
||||
} else {
|
||||
Messages.error("Failure", e.data);
|
||||
}
|
||||
complete();
|
||||
});
|
||||
}
|
||||
else {
|
||||
counter = counter + 1;
|
||||
action({id: c.Id}, function (d) {
|
||||
Messages.send("Container " + msg, c.Id);
|
||||
var index = $scope.containers.indexOf(c);
|
||||
complete();
|
||||
}, function (e) {
|
||||
Messages.error("Failure", e.data);
|
||||
complete();
|
||||
});
|
||||
var update = function (data) {
|
||||
ViewSpinner.spin();
|
||||
$scope.state.selectedItemCount = 0;
|
||||
Container.query(data, function (d) {
|
||||
$scope.containers = d.filter(function (container) {
|
||||
return container.Image !== 'swarm';
|
||||
}).map(function (container) {
|
||||
return new ContainerViewModel(container);
|
||||
});
|
||||
ViewSpinner.stop();
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
var batch = function (items, action, msg) {
|
||||
ViewSpinner.spin();
|
||||
var counter = 0;
|
||||
var complete = function () {
|
||||
counter = counter - 1;
|
||||
if (counter === 0) {
|
||||
ViewSpinner.stop();
|
||||
update({all: Settings.displayAll ? 1 : 0});
|
||||
}
|
||||
};
|
||||
angular.forEach(items, function (c) {
|
||||
if (c.Checked) {
|
||||
if (action === Container.start) {
|
||||
Container.get({id: c.Id}, function (d) {
|
||||
c = d;
|
||||
counter = counter + 1;
|
||||
action({id: c.Id, HostConfig: c.HostConfig || {}}, function (d) {
|
||||
Messages.send("Container " + msg, c.Id);
|
||||
var index = $scope.containers.indexOf(c);
|
||||
complete();
|
||||
}, function (e) {
|
||||
Messages.error("Failure", e.data);
|
||||
complete();
|
||||
});
|
||||
}, function (e) {
|
||||
if (e.status === 404) {
|
||||
$('.detail').hide();
|
||||
Messages.error("Not found", "Container not found.");
|
||||
} else {
|
||||
Messages.error("Failure", e.data);
|
||||
}
|
||||
complete();
|
||||
});
|
||||
}
|
||||
else {
|
||||
counter = counter + 1;
|
||||
action({id: c.Id}, function (d) {
|
||||
Messages.send("Container " + msg, c.Id);
|
||||
var index = $scope.containers.indexOf(c);
|
||||
complete();
|
||||
}, function (e) {
|
||||
Messages.error("Failure", e.data);
|
||||
complete();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
if (counter === 0) {
|
||||
ViewSpinner.stop();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$scope.toggleSelectAll = function () {
|
||||
angular.forEach($scope.filteredContainers, function (i) {
|
||||
i.Checked = $scope.toggle;
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
if (counter === 0) {
|
||||
ViewSpinner.stop();
|
||||
}
|
||||
};
|
||||
|
||||
$scope.toggleGetAll = function () {
|
||||
Settings.displayAll = $scope.displayAll;
|
||||
update({all: Settings.displayAll ? 1 : 0});
|
||||
};
|
||||
$scope.selectItem = function (item) {
|
||||
if (item.Checked) {
|
||||
$scope.state.selectedItemCount++;
|
||||
} else {
|
||||
$scope.state.selectedItemCount--;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.startAction = function () {
|
||||
batch($scope.containers, Container.start, "Started");
|
||||
};
|
||||
$scope.toggleSelectAll = function () {
|
||||
$scope.state.selectedItem = $scope.state.toggle;
|
||||
angular.forEach($scope.state.filteredContainers, function (i) {
|
||||
i.Checked = $scope.state.toggle;
|
||||
});
|
||||
if ($scope.state.toggle) {
|
||||
$scope.state.selectedItemCount = $scope.state.filteredContainers.length;
|
||||
} else {
|
||||
$scope.state.selectedItemCount = 0;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.stopAction = function () {
|
||||
batch($scope.containers, Container.stop, "Stopped");
|
||||
};
|
||||
$scope.toggleGetAll = function () {
|
||||
Settings.displayAll = $scope.state.displayAll;
|
||||
update({all: Settings.displayAll ? 1 : 0});
|
||||
};
|
||||
|
||||
$scope.restartAction = function () {
|
||||
batch($scope.containers, Container.restart, "Restarted");
|
||||
};
|
||||
$scope.startAction = function () {
|
||||
batch($scope.containers, Container.start, "Started");
|
||||
};
|
||||
|
||||
$scope.killAction = function () {
|
||||
batch($scope.containers, Container.kill, "Killed");
|
||||
};
|
||||
$scope.stopAction = function () {
|
||||
batch($scope.containers, Container.stop, "Stopped");
|
||||
};
|
||||
|
||||
$scope.pauseAction = function () {
|
||||
batch($scope.containers, Container.pause, "Paused");
|
||||
};
|
||||
$scope.restartAction = function () {
|
||||
batch($scope.containers, Container.restart, "Restarted");
|
||||
};
|
||||
|
||||
$scope.unpauseAction = function () {
|
||||
batch($scope.containers, Container.unpause, "Unpaused");
|
||||
};
|
||||
$scope.killAction = function () {
|
||||
batch($scope.containers, Container.kill, "Killed");
|
||||
};
|
||||
|
||||
$scope.removeAction = function () {
|
||||
batch($scope.containers, Container.remove, "Removed");
|
||||
};
|
||||
$scope.pauseAction = function () {
|
||||
batch($scope.containers, Container.pause, "Paused");
|
||||
};
|
||||
|
||||
update({all: Settings.displayAll ? 1 : 0});
|
||||
}]);
|
||||
$scope.unpauseAction = function () {
|
||||
batch($scope.containers, Container.unpause, "Unpaused");
|
||||
};
|
||||
|
||||
$scope.removeAction = function () {
|
||||
batch($scope.containers, Container.remove, "Removed");
|
||||
};
|
||||
|
||||
update({all: Settings.displayAll ? 1 : 0});
|
||||
}]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue