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

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()

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
+	Logger                *log.Logger
-	templatesURL string
+	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

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',

app/components/sidebar/sidebar.html

@@ -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>

app/components/templates/templates.html

@@ -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>
+              <span class="small" style="margin-left: 5px;">{{ state.selectedTemplate.Description }}</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>
             </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...

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',
+.controller('TemplatesController', ['$scope', '$q', '$state', '$stateParams', '$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) {
+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;

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;
 }]);

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 : '';

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);

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;