feat(endpoint): start Portainer without endpoint (#4460)

* feat(endpoint): start Portainer without endpoint

* feat(endpoint): minor UI update

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

app/portainer/services/api/endpointService.js

@@ -56,10 +56,10 @@ angular.module('portainer.app').factory('EndpointService', [
       return Endpoints.remove({ id: endpointID }).$promise;
     };
 
-    service.createLocalEndpoint = function () {
+    service.createLocalEndpoint = function (name = 'local') {
       var deferred = $q.defer();
 
-      FileUploadService.createEndpoint('local', PortainerEndpointCreationTypes.LocalDockerEnvironment, '', '', 1, [], false)
+      FileUploadService.createEndpoint(name, PortainerEndpointCreationTypes.LocalDockerEnvironment, '', '', 1, [], false)
         .then(function success(response) {
           deferred.resolve(response.data);
         })
@@ -117,10 +117,10 @@ angular.module('portainer.app').factory('EndpointService', [
       return deferred.promise;
     };
 
-    service.createLocalKubernetesEndpoint = function () {
+    service.createLocalKubernetesEndpoint = function (name = 'local') {
       var deferred = $q.defer();
 
-      FileUploadService.createEndpoint('local', PortainerEndpointCreationTypes.LocalKubernetesEnvironment, '', '', 1, [], true, true, true)
+      FileUploadService.createEndpoint(name, PortainerEndpointCreationTypes.LocalKubernetesEnvironment, '', '', 1, [], true, true, true)
         .then(function success(response) {
           deferred.resolve(response.data);
         })

app/portainer/views/endpoints/create/createEndpointController.js

@@ -89,40 +89,72 @@ angular
         $scope.availableTags = $scope.availableTags.concat(tag);
         $scope.formValues.TagIds = $scope.formValues.TagIds.concat(tag.Id);
       } catch (err) {
-        Notifications.error('Failue', err, 'Unable to create tag');
+        Notifications.error('Failure', err, 'Unable to create tag');
       }
     }
 
     $scope.addDockerEndpoint = function () {
+      if ($scope.formValues.ConnectSocket) {
+        var endpointName = $scope.formValues.Name;
+        $scope.state.actionInProgress = true;
+        EndpointService.createLocalEndpoint(endpointName)
+          .then(function success() {
+            Notifications.success('Endpoint created', endpointName);
+            $state.go('portainer.endpoints', {}, { reload: true });
+          })
+          .catch(function error(err) {
+            Notifications.error('Failure', err, 'Unable to create endpoint');
+          })
+          .finally(function final() {
+            $scope.state.actionInProgress = false;
+          });
+      } else {
+        var name = $scope.formValues.Name;
+        var URL = $filter('stripprotocol')($scope.formValues.URL);
+        var publicURL = $scope.formValues.PublicURL === '' ? URL.split(':')[0] : $scope.formValues.PublicURL;
+        var groupId = $scope.formValues.GroupId;
+        var tagIds = $scope.formValues.TagIds;
+
+        var securityData = $scope.formValues.SecurityFormData;
+        var TLS = securityData.TLS;
+        var TLSMode = securityData.TLSMode;
+        var TLSSkipVerify = TLS && (TLSMode === 'tls_client_noca' || TLSMode === 'tls_only');
+        var TLSSkipClientVerify = TLS && (TLSMode === 'tls_ca' || TLSMode === 'tls_only');
+        var TLSCAFile = TLSSkipVerify ? null : securityData.TLSCACert;
+        var TLSCertFile = TLSSkipClientVerify ? null : securityData.TLSCert;
+        var TLSKeyFile = TLSSkipClientVerify ? null : securityData.TLSKey;
+
+        addEndpoint(
+          name,
+          PortainerEndpointCreationTypes.LocalDockerEnvironment,
+          URL,
+          publicURL,
+          groupId,
+          tagIds,
+          TLS,
+          TLSSkipVerify,
+          TLSSkipClientVerify,
+          TLSCAFile,
+          TLSCertFile,
+          TLSKeyFile
+        );
+      }
+    };
+
+    $scope.addKubernetesEndpoint = function () {
       var name = $scope.formValues.Name;
-      var URL = $filter('stripprotocol')($scope.formValues.URL);
+      $scope.state.actionInProgress = true;
-      var publicURL = $scope.formValues.PublicURL === '' ? URL.split(':')[0] : $scope.formValues.PublicURL;
+      EndpointService.createLocalKubernetesEndpoint(name)
-      var groupId = $scope.formValues.GroupId;
+        .then(function success(result) {
-      var tagIds = $scope.formValues.TagIds;
+          Notifications.success('Endpoint created', name);
-
+          $state.go('portainer.endpoints.endpoint.kubernetesConfig', { id: result.Id });
-      var securityData = $scope.formValues.SecurityFormData;
+        })
-      var TLS = securityData.TLS;
+        .catch(function error(err) {
-      var TLSMode = securityData.TLSMode;
+          Notifications.error('Failure', err, 'Unable to create endpoint');
-      var TLSSkipVerify = TLS && (TLSMode === 'tls_client_noca' || TLSMode === 'tls_only');
+        })
-      var TLSSkipClientVerify = TLS && (TLSMode === 'tls_ca' || TLSMode === 'tls_only');
+        .finally(function final() {
-      var TLSCAFile = TLSSkipVerify ? null : securityData.TLSCACert;
+          $scope.state.actionInProgress = false;
-      var TLSCertFile = TLSSkipClientVerify ? null : securityData.TLSCert;
+        });
-      var TLSKeyFile = TLSSkipClientVerify ? null : securityData.TLSKey;
-
-      addEndpoint(
-        name,
-        PortainerEndpointCreationTypes.LocalDockerEnvironment,
-        URL,
-        publicURL,
-        groupId,
-        tagIds,
-        TLS,
-        TLSSkipVerify,
-        TLSSkipClientVerify,
-        TLSCAFile,
-        TLSCertFile,
-        TLSKeyFile
-      );
     };
 
     $scope.addAgentEndpoint = function () {

app/portainer/views/endpoints/create/createendpoint.html

@@ -44,6 +44,16 @@
                   <p>Directly connect to the Docker API</p>
                 </label>
               </div>
+              <div ng-click="resetEndpointURL()">
+                <input type="radio" id="kubernetes_endpoint" ng-model="state.EnvironmentType" value="kubernetes" />
+                <label for="kubernetes_endpoint">
+                  <div class="boxselector_header">
+                    <i class="fas fa-dharmachakra" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Kubernetes
+                  </div>
+                  <p>Local Kubernetes environment</p>
+                </label>
+              </div>
               <div>
                 <input type="radio" id="azure_endpoint" ng-model="state.EnvironmentType" value="azure" />
                 <label for="azure_endpoint">
@@ -61,10 +71,18 @@
               Important notice
             </div>
             <div class="form-group">
-              <span class="col-sm-12 text-muted small">
+              <p class="col-sm-12 text-muted small">
-                The Docker API must be exposed over TCP. You can find more information about how to expose the Docker API over TCP
+                You can connect Portainer to a Docker environment via socket or via TCP. You can find more information about how to expose the Docker API over TCP
-                <a href="https://docs.docker.com/engine/security/https/" target="_blank">in the Docker documentation</a>.
+                <a href="https://docs.docker.com/engine/security/https/"> in the Docker documentation</a>.
-              </span>
+              </p>
+
+              <p class="col-sm-12 text-muted small">
+                When using the socket, ensure that you have started the Portainer container with the following Docker flag
+                <code> -v "/var/run/docker.sock:/var/run/docker.sock" </code>
+                (on Linux) or
+                <code> -v \.\pipe\docker_engine:\.\pipe\docker_engine </code>
+                (on Windows).
+              </p>
             </div>
           </div>
           <div ng-if="state.EnvironmentType === 'agent'">
@@ -127,6 +145,21 @@
               </span>
             </div>
           </div>
+          <div ng-if="state.EnvironmentType === 'kubernetes'">
+            <div class="col-sm-12 form-section-title">
+              Important notice
+            </div>
+            <div class="form-group">
+              <p class="col-sm-12 text-muted small">
+                This will allow you to manage the Kubernetes environment where Portainer is running.
+              </p>
+
+              <p class="col-sm-12 text-muted small">
+                <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                In order to manage a remote Kubernetes environment, please use the Agent or Edge agent options.
+              </p>
+            </div>
+          </div>
           <div ng-if="state.EnvironmentType === 'azure'">
             <div class="col-sm-12 form-section-title">
               Information
@@ -176,8 +209,18 @@
             </div>
           </div>
           <!-- !name-input -->
+          <!-- connect-via-socket-input -->
+          <div ng-if="state.EnvironmentType === 'docker'">
+            <div class="form-group" style="padding-left: 15px;">
+              <label for="connect_socket" class="col-sm_12 control-label text-left">
+                Connect via socket
+              </label>
+              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.ConnectSocket" /><i></i> </label>
+            </div>
+          </div>
+          <!-- !connect-via-socket-input -->
           <!-- endpoint-url-input -->
-          <div ng-if="state.EnvironmentType === 'docker' || state.EnvironmentType === 'agent'">
+          <div ng-if="(state.EnvironmentType === 'docker' && !formValues.ConnectSocket) || state.EnvironmentType === 'agent'">
             <div class="form-group">
               <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
                 Endpoint URL
@@ -403,6 +446,17 @@
                 <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
                 <span ng-show="state.actionInProgress">Creating endpoint...</span>
               </button>
+              <button
+                ng-if="state.EnvironmentType === 'kubernetes'"
+                type="submit"
+                class="btn btn-primary btn-sm"
+                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid"
+                ng-click="addKubernetesEndpoint()"
+                button-spinner="state.actionInProgress"
+              >
+                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
+                <span ng-show="state.actionInProgress">Creating endpoint...</span>
+              </button>
               <button
                 ng-if="state.EnvironmentType === 'azure'"
                 type="submit"

app/portainer/views/home/home.html

@@ -30,6 +30,17 @@
   <i class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
 </div>
 
+<information-panel ng-if="isAdmin && endpoints.length === 0" title-text="Information">
+  <span class="small text-muted">
+    <p>
+      <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+      No environment available for management. Please head over the
+      <a ui-sref="portainer.endpoints.new"> endpoints view </a>
+      to add an endpoint.
+    </p>
+  </span>
+</information-panel>
+
 <div class="row" ng-if="!state.connectingToEdgeEndpoint">
   <div class="col-sm-12">
     <endpoint-list

app/portainer/views/init/endpoint/initEndpoint.html

@@ -62,6 +62,9 @@
                   <span ng-hide="ctrl.state.actionInProgress"><i class="fa fa-bolt" aria-hidden="true"></i> Connect</span>
                   <span ng-show="ctrl.state.actionInProgress">Connecting...</span>
                 </button>
+                <button type="submit" class="btn btn-sm btn-default" ng-click="ctrl.skipEndpointCreation()" button-spinner="ctrl.state.actionInProgress">
+                  <span ng-hide="ctrl.state.actionInProgress"><i class="fa fa-share" aria-hidden="true"></i> Skip</span>
+                </button>
               </div>
             </div>
             <!-- !actions -->

app/portainer/views/init/endpoint/initEndpointController.js

@@ -65,6 +65,10 @@ class InitEndpointController {
     }
   }
 
+  skipEndpointCreation() {
+    this.$state.go('portainer.home');
+  }
+
   /**
    * DOCKER_LOCAL (1)
    */