github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(templates): LinuxServer.io templates integration (#761)

pull/765/head
Anthony Lapenna 2017-04-05 10:13:32 +02:00 committed by GitHub
parent 16166c3367
commit b8803f380b
10 changed files with 113 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/http/server.go
View File

@ -42,7 +42,7 @@ func (server *Server) Start() error {
var settingsHandler = NewSettingsHandler(middleWareService)
settingsHandler.settings = server.Settings
var templatesHandler = NewTemplatesHandler(middleWareService)
templatesHandler.templatesURL = server.TemplatesURL
templatesHandler.containerTemplatesURL = server.TemplatesURL
var dockerHandler = NewDockerHandler(middleWareService, server.ResourceControlService)
dockerHandler.EndpointService = server.EndpointService
var websocketHandler = NewWebSocketHandler()

28
api/http/templates_handler.go
View File

@ -12,10 +12,14 @@ import (
// TemplatesHandler represents an HTTP API handler for managing templates.
type TemplatesHandler struct {
*mux.Router
Logger *log.Logger
templatesURL string
Logger *log.Logger
containerTemplatesURL string
}
const (
containerTemplatesURLLinuxServerIo = "http://tools.linuxserver.io/portainer.json"
)
// NewTemplatesHandler returns a new instance of TemplatesHandler.
func NewTemplatesHandler(mw *middleWareService) *TemplatesHandler {
h := &TemplatesHandler{
@ -27,14 +31,30 @@ func NewTemplatesHandler(mw *middleWareService) *TemplatesHandler {
return h
}
// handleGetTemplates handles GET requests on /templates
// handleGetTemplates handles GET requests on /templates?key=<key>
func (handler *TemplatesHandler) handleGetTemplates(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodGet {
handleNotAllowed(w, []string{http.MethodGet})
return
}
resp, err := http.Get(handler.templatesURL)
key := r.FormValue("key")
if key == "" {
Error(w, ErrInvalidQueryFormat, http.StatusBadRequest, handler.Logger)
return
}
var templatesURL string
if key == "containers" {
templatesURL = handler.containerTemplatesURL
} else if key == "linuxserver.io" {
templatesURL = containerTemplatesURLLinuxServerIo
} else {
Error(w, ErrInvalidQueryFormat, http.StatusBadRequest, handler.Logger)
return
}
resp, err := http.Get(templatesURL)
if err != nil {
Error(w, err, http.StatusInternalServerError, handler.Logger)
return

21
app/app.js
View File

@ -456,6 +456,27 @@ angular.module('portainer', [
})
.state('templates', {
url: '/templates/',
params: {
key: 'containers',
hide_descriptions: false
},
views: {
"content@": {
templateUrl: 'app/components/templates/templates.html',
controller: 'TemplatesController'
},
"sidebar@": {
templateUrl: 'app/components/sidebar/sidebar.html',
controller: 'SidebarController'
}
}
})
.state('templates_linuxserver', {
url: '^/templates/linuxserver.io',
params: {
key: 'linuxserver.io',
hide_descriptions: true
},
views: {
"content@": {
templateUrl: 'app/components/templates/templates.html',

3
app/components/sidebar/sidebar.html
View File

@ -21,6 +21,9 @@
</li>
<li class="sidebar-list">
<a ui-sref="templates" ui-sref-active="active">App Templates <span class="menu-icon fa fa-rocket"></span></a>
<div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'templates' || $state.current.name === 'templates_linuxserver')">
<a ui-sref="templates_linuxserver" ui-sref-active="active">LinuxServer.io</a>
</div>
</li>
<li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<a ui-sref="services" ui-sref-active="active">Services <span class="menu-icon fa fa-list-alt"></span></a>

21
app/components/templates/templates.html
View File

@ -14,17 +14,13 @@
</rd-widget-custom-header>
<rd-widget-body classes="padding">
<form class="form-horizontal">
<div class="form-group" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
<!-- description -->
<div class="form-group" ng-if="state.selectedTemplate.Description">
<div class="col-sm-12">
<span class="small text-muted">When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the <a ui-sref="networks">networks view</a> to create one.</span>
</div>
</div>
<div class="form-group" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<div class="col-sm-12">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="small text-muted">App templates cannot be used with swarm-mode at the moment. You can still use them to quickly deploy containers to the Docker host.</span>
<span class="small" style="margin-left: 5px;">{{ state.selectedTemplate.Description }}</span>
</div>
</div>
<!-- !description -->
<!-- name-and-network-inputs -->
<div class="form-group">
<label for="container_name" class="col-sm-1 control-label text-left">Name</label>
@ -200,6 +196,13 @@
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
<i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
<span class="small text-muted" style="margin-left: 10px" ng-if="globalNetworkCount === 0 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">
When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the <a ui-sref="networks">networks view</a> to create one.
</span>
<span ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'" style="margin-left: 10px">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="small text-muted" style="margin-left: 5px;">App templates cannot be deployed as Swarm Mode services for the moment. You can still use them to quickly deploy containers on the Docker host.</span>
</span>
</div>
</div>
</form>
@ -228,7 +231,7 @@
<div dir-paginate="tpl in templates | itemsPerPage: state.pagination_count" class="container-template hvr-underline-from-center" id="template_{{ tpl.index }}" ng-click="selectTemplate(tpl.index)">
<img class="logo" ng-src="{{ tpl.Logo }}" />
<div class="title">{{ tpl.Title }}</div>
<div class="description">{{ tpl.Description }}</div>
<div class="description" ng-if="tpl.Description && !state.hideDescriptions">{{ tpl.Description }}</div>
</div>
<div ng-if="!templates" class="text-center text-muted">
Loading...

16
app/components/templates/templatesController.js
View File

@ -1,9 +1,10 @@
angular.module('templates', [])
.controller('TemplatesController', ['$scope', '$q', '$state', '$anchorScroll', 'Config', 'ContainerService', 'ContainerHelper', 'ImageService', 'NetworkService', 'TemplateService', 'TemplateHelper', 'VolumeService', 'Messages', 'Pagination', 'ResourceControlService', 'Authentication',
function ($scope, $q, $state, $anchorScroll, Config, ContainerService, ContainerHelper, ImageService, NetworkService, TemplateService, TemplateHelper, VolumeService, Messages, Pagination, ResourceControlService, Authentication) {
.controller('TemplatesController', ['$scope', '$q', '$state', '$stateParams', '$anchorScroll', 'Config', 'ContainerService', 'ContainerHelper', 'ImageService', 'NetworkService', 'TemplateService', 'TemplateHelper', 'VolumeService', 'Messages', 'Pagination', 'ResourceControlService', 'Authentication',
function ($scope, $q, $state, $stateParams, $anchorScroll, Config, ContainerService, ContainerHelper, ImageService, NetworkService, TemplateService, TemplateHelper, VolumeService, Messages, Pagination, ResourceControlService, Authentication) {
$scope.state = {
selectedTemplate: null,
showAdvancedOptions: false,
hideDescriptions: $stateParams.hide_descriptions,
pagination_count: Pagination.getPaginationCount('templates')
};
$scope.formValues = {
@ -124,7 +125,7 @@ function ($scope, $q, $state, $anchorScroll, Config, ContainerService, Container
if (endpointProvider === 'DOCKER_SWARM' || endpointProvider === 'DOCKER_SWARM_MODE') {
if (endpointProvider === 'DOCKER_SWARM') {
networks = NetworkService.filterGlobalNetworks(networks);
} else {
} else {
networks = NetworkService.filterSwarmModeAttachableNetworks(networks);
}
$scope.globalNetworkCount = networks.length;
@ -134,15 +135,20 @@ function ($scope, $q, $state, $anchorScroll, Config, ContainerService, Container
}
function initTemplates() {
var templatesKey = $stateParams.key;
Config.$promise.then(function (c) {
$q.all({
templates: TemplateService.getTemplates(),
templates: TemplateService.getTemplates(templatesKey),
containers: ContainerService.getContainers(0, c.hiddenLabels),
networks: NetworkService.getNetworks(),
volumes: VolumeService.getVolumes()
})
.then(function success(data) {
$scope.templates = data.templates;
var templates = data.templates;
if (templatesKey === 'linuxserver.io') {
templates = TemplateService.filterLinuxServerIOTemplates(templates);
}
$scope.templates = templates;
$scope.runningContainers = data.containers;
$scope.availableNetworks = filterNetworksBasedOnProvider(data.networks);
$scope.availableVolumes = data.volumes.Volumes;

17
app/helpers/templateHelper.js
View File

@ -93,5 +93,22 @@ angular.module('portainer.helpers')
return count;
};
helper.filterLinuxServerIOTemplates = function(templates) {
return templates.filter(function f(template) {
var valid = false;
if (template.Category) {
angular.forEach(template.Category, function(category) {
if (_.startsWith(category, 'Network')) {
valid = true;
}
});
}
return valid;
}).map(function(template, idx) {
template.index = idx;
return template;
});
};
return helper;
}]);

1
app/models/template.js
View File

@ -1,6 +1,7 @@
function TemplateViewModel(data) {
this.Title = data.title;
this.Description = data.description;
this.Category = data.category;
this.Logo = data.logo;
this.Image = data.image;
this.Registry = data.registry ? data.registry : '';

8
app/services/templateService.js
View File

@ -3,9 +3,9 @@ angular.module('portainer.services')
'use strict';
var service = {};
service.getTemplates = function() {
service.getTemplates = function(key) {
var deferred = $q.defer();
Template.get().$promise
Template.get({key: key}).$promise
.then(function success(data) {
var templates = data.map(function (tpl, idx) {
var template = new TemplateViewModel(tpl);
@ -20,6 +20,10 @@ angular.module('portainer.services')
return deferred.promise;
};
service.filterLinuxServerIOTemplates = function(templates) {
return TemplateHelper.filterLinuxServerIOTemplates(templates);
};
service.createTemplateConfiguration = function(template, containerName, network, containerMapping) {
var imageConfiguration = ImageHelper.createImageConfigForContainer(template.Image, template.Registry);
var containerConfiguration = service.createContainerConfiguration(template, containerName, network, containerMapping);

17
assets/css/app.css
View File

@ -301,6 +301,10 @@ ul.sidebar {
bottom: 40px;
}
ul.sidebar .sidebar-title {
height: auto;
}
ul.sidebar .sidebar-list a.active {
color: #fff;
text-indent: 22px;
@ -308,6 +312,19 @@ ul.sidebar .sidebar-list a.active {
background: #2d3e63;
}
ul.sidebar .sidebar-list .sidebar-sublist a {
text-indent: 35px;
font-size: 12px;
color: #b2bfdc;
line-height: 40px;
}
ul.sidebar .sidebar-list .sidebar-sublist a.active {
color: #fff;
border-left: 3px solid #fff;
background: #2d3e63;
}
@media(min-width: 768px) and (max-width: 992px) {
.margin-sm-top {
margin-top: 5px;