diff --git a/api/http/server.go b/api/http/server.go index 046e58ee9..974174b5c 100644 --- a/api/http/server.go +++ b/api/http/server.go @@ -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() diff --git a/api/http/templates_handler.go b/api/http/templates_handler.go index 510605021..be994ddc2 100644 --- a/api/http/templates_handler.go +++ b/api/http/templates_handler.go @@ -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= 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 diff --git a/app/app.js b/app/app.js index 21ed9207a..1142ad666 100644 --- a/app/app.js +++ b/app/app.js @@ -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', diff --git a/app/components/sidebar/sidebar.html b/app/components/sidebar/sidebar.html index 5515fa69e..85d60dc83 100644 --- a/app/components/sidebar/sidebar.html +++ b/app/components/sidebar/sidebar.html @@ -21,6 +21,9 @@
  • App Templates +
    + LinuxServer.io +
  • Services diff --git a/app/components/templates/templates.html b/app/components/templates/templates.html index 4e943f9e0..3c15a0a50 100644 --- a/app/components/templates/templates.html +++ b/app/components/templates/templates.html @@ -14,17 +14,13 @@
    -
    + +
    - When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the networks view to create one. -
    -
    -
    -
    - - App templates cannot be used with swarm-mode at the moment. You can still use them to quickly deploy containers to the Docker host. + {{ state.selectedTemplate.Description }}
    +
    @@ -200,6 +196,13 @@
    + + When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the networks view to create one. + + + + 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. +
    @@ -228,7 +231,7 @@
    {{ tpl.Title }}
    -
    {{ tpl.Description }}
    +
    {{ tpl.Description }}
    Loading... diff --git a/app/components/templates/templatesController.js b/app/components/templates/templatesController.js index 625df6044..003ddba7d 100644 --- a/app/components/templates/templatesController.js +++ b/app/components/templates/templatesController.js @@ -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; diff --git a/app/helpers/templateHelper.js b/app/helpers/templateHelper.js index 0df432495..4556195f9 100644 --- a/app/helpers/templateHelper.js +++ b/app/helpers/templateHelper.js @@ -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; }]); diff --git a/app/models/template.js b/app/models/template.js index e7e5ae4a6..3456e8c9d 100644 --- a/app/models/template.js +++ b/app/models/template.js @@ -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 : ''; diff --git a/app/services/templateService.js b/app/services/templateService.js index fb1c86414..c7be012c0 100644 --- a/app/services/templateService.js +++ b/app/services/templateService.js @@ -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); diff --git a/assets/css/app.css b/assets/css/app.css index b26bc7bc5..ed58a6d81 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -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;