revert(azure): revert removal (#3890)

* Revert "fix(sidebar): show docker sidebar when needed (#3852)"

This reverts commit 59da17dde4.

* Revert "refactor(azure): remove Azure ACI endpoint support (#3803)"

This reverts commit 493de20540.

app/portainer/components/endpoint-list/endpoint-item/endpointItem.html

@@ -1,6 +1,6 @@
 <div class="blocklist-item" ng-click="$ctrl.onSelect($ctrl.model)">
   <div class="blocklist-item-box">
-    <span class="blocklist-item-logo endpoint-item">
+    <span ng-class="['blocklist-item-logo', 'endpoint-item', { azure: $ctrl.model.Type === 3 }]">
       <i ng-if="$ctrl.model.Type !== 4" ng-class="$ctrl.model.Type | endpointtypeicon" class="fa-4x blue-icon" aria-hidden="true"></i>
       <img ng-if="$ctrl.model.Type === 4" src="~@/assets/images/edge_endpoint.png" />
     </span>

app/portainer/filters/filters.js

@@ -128,6 +128,8 @@ angular
         return 'Docker';
       } else if (type === 2) {
         return 'Agent';
+      } else if (type === 3) {
+        return 'Azure ACI';
       } else if (type === 4) {
         return 'Edge Agent';
       }

app/portainer/services/api/endpointService.js

@@ -112,6 +112,20 @@ angular.module('portainer.app').factory('EndpointService', [
       return deferred.promise;
     };
 
+    service.createAzureEndpoint = function (name, applicationId, tenantId, authenticationKey, groupId, tagIds) {
+      var deferred = $q.defer();
+
+      FileUploadService.createAzureEndpoint(name, applicationId, tenantId, authenticationKey, groupId, tagIds)
+        .then(function success(response) {
+          deferred.resolve(response.data);
+        })
+        .catch(function error(err) {
+          deferred.reject({ msg: 'Unable to connect to Azure', err: err });
+        });
+
+      return deferred.promise;
+    };
+
     service.executeJobFromFileUpload = function (image, jobFile, endpointId, nodeName) {
       return FileUploadService.executeEndpointJob(image, jobFile, endpointId, nodeName);
     };

app/portainer/services/fileUpload.js

@@ -137,6 +137,22 @@ angular.module('portainer.app').factory('FileUploadService', [
       });
     };
 
+    service.createAzureEndpoint = function (name, applicationId, tenantId, authenticationKey, groupId, tagIds) {
+      return Upload.upload({
+        url: 'api/endpoints',
+        data: {
+          Name: name,
+          EndpointType: 3,
+          GroupID: groupId,
+          TagIds: Upload.json(tagIds),
+          AzureApplicationID: applicationId,
+          AzureTenantID: tenantId,
+          AzureAuthenticationKey: authenticationKey,
+        },
+        ignoreLoadingBar: true,
+      });
+    };
+
     service.uploadLDAPTLSFiles = function (TLSCAFile, TLSCertFile, TLSKeyFile) {
       var queue = [];
 

app/portainer/services/stateManager.js

@@ -168,6 +168,14 @@ angular.module('portainer.app').factory('StateManager', [
     manager.updateEndpointState = function (endpoint, extensions) {
       var deferred = $q.defer();
 
+      if (endpoint.Type === 3) {
+        state.endpoint.name = endpoint.Name;
+        state.endpoint.mode = { provider: 'AZURE' };
+        LocalStorage.storeEndpointState(state.endpoint);
+        deferred.resolve();
+        return deferred.promise;
+      }
+
       $q.all({
         version: endpoint.Status === 1 ? SystemService.version() : $q.when(endpoint.Snapshots[0].SnapshotRaw.Version),
         info: endpoint.Status === 1 ? SystemService.info() : $q.when(endpoint.Snapshots[0].SnapshotRaw.Info),

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

@@ -46,6 +46,9 @@ angular
       PublicURL: '',
       GroupId: 1,
       SecurityFormData: new EndpointSecurityFormData(),
+      AzureApplicationId: '',
+      AzureTenantId: '',
+      AzureAuthenticationKey: '',
       TagIds: [],
       CheckinInterval: $scope.state.availableEdgeAgentCheckinOptions[0].value,
     };
@@ -102,6 +105,17 @@ angular
       addEndpoint(name, 4, URL, '', groupId, tagIds, false, false, false, null, null, null, $scope.formValues.CheckinInterval);
     };
 
+    $scope.addAzureEndpoint = function () {
+      var name = $scope.formValues.Name;
+      var applicationId = $scope.formValues.AzureApplicationId;
+      var tenantId = $scope.formValues.AzureTenantId;
+      var authenticationKey = $scope.formValues.AzureAuthenticationKey;
+      var groupId = $scope.formValues.GroupId;
+      var tagIds = $scope.formValues.TagIds;
+
+      createAzureEndpoint(name, applicationId, tenantId, authenticationKey, groupId, tagIds);
+    };
+
     $scope.onCreateTag = function onCreateTag(tagName) {
       return $async(onCreateTagAsync, tagName);
     };
@@ -116,6 +130,21 @@ angular
       }
     }
 
+    function createAzureEndpoint(name, applicationId, tenantId, authenticationKey, groupId, tagIds) {
+      $scope.state.actionInProgress = true;
+      EndpointService.createAzureEndpoint(name, applicationId, tenantId, authenticationKey, groupId, tagIds)
+        .then(function success() {
+          Notifications.success('Endpoint created', name);
+          $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;
+        });
+    }
+
     function addEndpoint(name, type, URL, PublicURL, groupId, tagIds, TLS, TLSSkipVerify, TLSSkipClientVerify, TLSCAFile, TLSCertFile, TLSKeyFile, CheckinInterval) {
       $scope.state.actionInProgress = true;
       EndpointService.createRemoteEndpoint(

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

@@ -44,6 +44,16 @@
                   <p>Directly connect to the Docker API</p>
                 </label>
               </div>
+              <div>
+                <input type="radio" id="azure_endpoint" ng-model="state.EnvironmentType" value="azure" />
+                <label for="azure_endpoint">
+                  <div class="boxselector_header">
+                    <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Azure
+                  </div>
+                  <p>Connect to Microsoft Azure ACI</p>
+                </label>
+              </div>
             </div>
           </div>
           <div ng-if="state.EnvironmentType === 'docker'">
@@ -87,6 +97,29 @@
               </span>
             </div>
           </div>
+          <div ng-if="state.EnvironmentType === 'azure'">
+            <div class="col-sm-12 form-section-title">
+              Information
+            </div>
+            <div class="form-group">
+              <div class="col-sm-12">
+                <span class="small">
+                  <p class="text-muted"> <i class="fa fa-flask orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> This feature is experimental. </p>
+                  <p class="text-primary">
+                    Connect to Microsoft Azure to manage Azure Container Instances (ACI).
+                  </p>
+                  <p class="text-muted">
+                    <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Have a look at
+                    <a href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal" target="_blank"
+                      >the Azure documentation</a
+                    >
+                    to retrieve the credentials required below.
+                  </p>
+                </span>
+              </div>
+            </div>
+          </div>
           <div class="col-sm-12 form-section-title">
             Environment details
           </div>
@@ -198,6 +231,76 @@
             </div>
           </div>
           <!-- !endpoint-public-url-input -->
+          <!-- azure-details -->
+          <div ng-if="state.EnvironmentType === 'azure'">
+            <!-- applicationId-input -->
+            <div class="form-group">
+              <label for="azure_credential_appid" class="col-sm-3 col-lg-2 control-label text-left">Application ID</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  name="azure_credential_appid"
+                  ng-model="formValues.AzureApplicationId"
+                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                  required
+                />
+              </div>
+            </div>
+            <div class="form-group" ng-show="endpointCreationForm.azure_credential_appid.$invalid">
+              <div class="col-sm-12 small text-warning">
+                <div ng-messages="endpointCreationForm.azure_credential_appid.$error">
+                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
+              </div>
+            </div>
+            <!-- !applicationId-input -->
+            <!-- tenantId-input -->
+            <div class="form-group">
+              <label for="azure_credential_tenantid" class="col-sm-3 col-lg-2 control-label text-left">Tenant ID</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  name="azure_credential_tenantid"
+                  ng-model="formValues.AzureTenantId"
+                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+                  required
+                />
+              </div>
+            </div>
+            <div class="form-group" ng-show="endpointCreationForm.azure_credential_tenantid.$invalid">
+              <div class="col-sm-12 small text-warning">
+                <div ng-messages="endpointCreationForm.azure_credential_tenantid.$error">
+                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
+              </div>
+            </div>
+            <!-- !tenantId-input -->
+            <!-- authenticationkey-input -->
+            <div class="form-group">
+              <label for="azure_credential_authkey" class="col-sm-3 col-lg-2 control-label text-left">Authentication key</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  name="azure_credential_authkey"
+                  ng-model="formValues.AzureAuthenticationKey"
+                  placeholder="cOrXoK/1D35w8YQ8nH1/8ZGwzz45JIYD5jxHKXEQknk="
+                  required
+                />
+              </div>
+            </div>
+            <div class="form-group" ng-show="endpointCreationForm.azure_credential_authkey.$invalid">
+              <div class="col-sm-12 small text-warning">
+                <div ng-messages="endpointCreationForm.azure_credential_authkey.$error">
+                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
+              </div>
+            </div>
+            <!-- !authenticationkey-input -->
+          </div>
+          <!-- !azure-details -->
           <!-- endpoint-security -->
           <por-endpoint-security ng-if="state.EnvironmentType === 'docker'" form-data="formValues.SecurityFormData"></por-endpoint-security>
           <!-- !endpoint-security -->
@@ -264,6 +367,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 === 'azure'"
+                type="submit"
+                class="btn btn-primary btn-sm"
+                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid"
+                ng-click="addAzureEndpoint()"
+                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>
             </div>
           </div>
           <!-- !actions -->

app/portainer/views/endpoints/edit/endpoint.html

@@ -118,7 +118,7 @@
               <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com" />
             </div>
           </div>
-          <div class="form-group">
+          <div class="form-group" ng-if="endpoint.Type === 4">
             <label for="edge_checkin" class="col-sm-2 control-label text-left">
               Poll frequency
               <portainer-tooltip
@@ -135,6 +135,12 @@
               ></select>
             </div>
           </div>
+          <azure-endpoint-config
+            ng-if="endpoint.Type === 3"
+            application-id="endpoint.AzureCredentials.ApplicationID"
+            tenant-id="endpoint.AzureCredentials.TenantID"
+            authentication-key="endpoint.AzureCredentials.AuthenticationKey"
+          ></azure-endpoint-config>
           <!-- !endpoint-public-url-input -->
           <div class="col-sm-12 form-section-title">
             Metadata

app/portainer/views/endpoints/edit/endpointController.js

@@ -109,6 +109,9 @@ angular
         TLSCACert: TLSSkipVerify || securityData.TLSCACert === endpoint.TLSConfig.TLSCACert ? null : securityData.TLSCACert,
         TLSCert: TLSSkipClientVerify || securityData.TLSCert === endpoint.TLSConfig.TLSCert ? null : securityData.TLSCert,
         TLSKey: TLSSkipClientVerify || securityData.TLSKey === endpoint.TLSConfig.TLSKey ? null : securityData.TLSKey,
+        AzureApplicationID: endpoint.AzureCredentials.ApplicationID,
+        AzureTenantID: endpoint.AzureCredentials.TenantID,
+        AzureAuthenticationKey: endpoint.AzureCredentials.AuthenticationKey,
       };
 
       if ($scope.endpointType !== 'local' && endpoint.Type !== 3) {

app/portainer/views/home/homeController.js

@@ -26,7 +26,9 @@ angular
     };
 
     $scope.goToDashboard = function (endpoint) {
-      if (endpoint.Type === 4) {
+      if (endpoint.Type === 3) {
+        return switchToAzureEndpoint(endpoint);
+      } else if (endpoint.Type === 4) {
         return switchToEdgeEndpoint(endpoint);
       }
 
@@ -87,6 +89,19 @@ angular
       return deferred.promise;
     }
 
+    function switchToAzureEndpoint(endpoint) {
+      EndpointProvider.setEndpointID(endpoint.Id);
+      EndpointProvider.setEndpointPublicURL(endpoint.PublicURL);
+      EndpointProvider.setOfflineModeFromStatus(endpoint.Status);
+      StateManager.updateEndpointState(endpoint, [])
+        .then(function success() {
+          $state.go('azure.dashboard');
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to connect to the Azure endpoint');
+        });
+    }
+
     function switchToEdgeEndpoint(endpoint) {
       if (!endpoint.EdgeID) {
         $state.go('portainer.endpoints.endpoint', { id: endpoint.Id });

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

@@ -55,6 +55,16 @@
                     <p>Connect to a Portainer agent</p>
                   </label>
                 </div>
+                <div>
+                  <input type="radio" id="azure_endpoint" ng-model="formValues.EndpointType" value="azure" />
+                  <label for="azure_endpoint">
+                    <div class="boxselector_header">
+                      <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
+                      Azure
+                    </div>
+                    <p>Connect to Microsoft Azure ACI</p>
+                  </label>
+                </div>
               </div>
             </div>
             <!-- !endpoint-type  -->
@@ -158,6 +168,91 @@
               <!-- !actions -->
             </div>
             <!-- !agent-endpoint -->
+            <!-- azure-endpoint -->
+            <div ng-if="formValues.EndpointType === 'azure'">
+              <div class="col-sm-12 form-section-title">
+                Information
+              </div>
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <span class="small">
+                    <p class="text-muted"> <i class="fa fa-flask orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> This feature is experimental. </p>
+                    <p class="text-primary">
+                      Connect to Microsoft Azure to manage Azure Container Instances (ACI).
+                    </p>
+                    <p class="text-muted">
+                      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                      Have a look at
+                      <a href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal" target="_blank"
+                        >the Azure documentation</a
+                      >
+                      to retrieve the credentials required below.
+                    </p>
+                  </span>
+                </div>
+              </div>
+              <div class="col-sm-12 form-section-title">
+                Environment
+              </div>
+              <!-- name-input -->
+              <div class="form-group">
+                <label for="endpoint_name" class="col-sm-4 col-lg-3 control-label text-left">Name</label>
+                <div class="col-sm-8 col-lg-9">
+                  <input type="text" class="form-control" id="endpoint_name" ng-model="formValues.Name" placeholder="e.g. azure-01" />
+                </div>
+              </div>
+              <!-- !name-input -->
+              <div class="col-sm-12 form-section-title">
+                Azure credentials
+              </div>
+              <!-- applicationId-input -->
+              <div class="form-group">
+                <label for="azure_credential_appid" class="col-sm-4 col-lg-3 control-label text-left">Application ID</label>
+                <div class="col-sm-8 col-lg-9">
+                  <input type="text" class="form-control" id="azure_credential_appid" ng-model="formValues.AzureApplicationId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />
+                </div>
+              </div>
+              <!-- !applicationId-input -->
+              <!-- tenantId-input -->
+              <div class="form-group">
+                <label for="azure_credential_tenantid" class="col-sm-4 col-lg-3 control-label text-left">Tenant ID</label>
+                <div class="col-sm-8 col-lg-9">
+                  <input type="text" class="form-control" id="azure_credential_tenantid" ng-model="formValues.AzureTenantId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />
+                </div>
+              </div>
+              <!-- !tenantId-input -->
+              <!-- authenticationkey-input -->
+              <div class="form-group">
+                <label for="azure_credential_authkey" class="col-sm-4 col-lg-3 control-label text-left">Authentication key</label>
+                <div class="col-sm-8 col-lg-9">
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="azure_credential_authkey"
+                    ng-model="formValues.AzureAuthenticationKey"
+                    placeholder="cOrXoK/1D35w8YQ8nH1/8ZGwzz45JIYD5jxHKXEQknk="
+                  />
+                </div>
+              </div>
+              <!-- !authenticationkey-input -->
+              <!-- actions -->
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <button
+                    type="submit"
+                    class="btn btn-primary btn-sm"
+                    ng-disabled="state.actionInProgress || !formValues.Name || !formValues.AzureApplicationId || !formValues.AzureTenantId || !formValues.AzureAuthenticationKey"
+                    ng-click="createAzureEndpoint()"
+                    button-spinner="state.actionInProgress"
+                  >
+                    <span ng-hide="state.actionInProgress"><i class="fa fa-bolt" aria-hidden="true"></i> Connect</span>
+                    <span ng-show="state.actionInProgress">Connecting...</span>
+                  </button>
+                </div>
+              </div>
+              <!-- !actions -->
+            </div>
+            <!-- !azure-endpoint -->
             <!-- remote-endpoint -->
             <div ng-if="formValues.EndpointType === 'remote'">
               <div class="col-sm-12 form-section-title">

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

@@ -28,6 +28,9 @@ angular.module('portainer.app').controller('InitEndpointController', [
       TLSCACert: null,
       TLSCert: null,
       TLSKey: null,
+      AzureApplicationId: '',
+      AzureTenantId: '',
+      AzureAuthenticationKey: '',
     };
 
     $scope.createLocalEndpoint = function () {
@@ -44,6 +47,15 @@ angular.module('portainer.app').controller('InitEndpointController', [
         });
     };
 
+    $scope.createAzureEndpoint = function () {
+      var name = $scope.formValues.Name;
+      var applicationId = $scope.formValues.AzureApplicationId;
+      var tenantId = $scope.formValues.AzureTenantId;
+      var authenticationKey = $scope.formValues.AzureAuthenticationKey;
+
+      createAzureEndpoint(name, applicationId, tenantId, authenticationKey);
+    };
+
     $scope.createAgentEndpoint = function () {
       var name = $scope.formValues.Name;
       var URL = $scope.formValues.URL;
@@ -66,6 +78,20 @@ angular.module('portainer.app').controller('InitEndpointController', [
       createRemoteEndpoint(name, 1, URL, PublicURL, TLS, TLSSkipVerify, TLSSKipClientVerify, TLSCAFile, TLSCertFile, TLSKeyFile);
     };
 
+    function createAzureEndpoint(name, applicationId, tenantId, authenticationKey) {
+      $scope.state.actionInProgress = true;
+      EndpointService.createAzureEndpoint(name, applicationId, tenantId, authenticationKey, 1, [])
+        .then(function success() {
+          $state.go('portainer.home');
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to connect to the Azure environment');
+        })
+        .finally(function final() {
+          $scope.state.actionInProgress = false;
+        });
+    }
+
     function createRemoteEndpoint(name, type, URL, PublicURL, TLS, TLSSkipVerify, TLSSKipClientVerify, TLSCAFile, TLSCertFile, TLSKeyFile) {
       $scope.state.actionInProgress = true;
       EndpointService.createRemoteEndpoint(name, type, URL, PublicURL, 1, [], TLS, TLSSkipVerify, TLSSKipClientVerify, TLSCAFile, TLSCertFile, TLSKeyFile)

app/portainer/views/sidebar/sidebar.html

@@ -13,8 +13,9 @@
         <a ui-sref="portainer.home" ui-sref-active="active">Home <span class="menu-icon fa fa-home fa-fw"></span></a>
       </li>
       <li class="sidebar-title endpoint-name" ng-if="applicationState.endpoint.name"> <span class="fa fa-plug space-right"></span>{{ applicationState.endpoint.name }} </li>
+      <azure-sidebar-content ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider === 'AZURE'"> </azure-sidebar-content>
       <docker-sidebar-content
-        ng-if="applicationState.endpoint.mode"
+        ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider !== 'AZURE'"
         endpoint-api-version="applicationState.endpoint.apiVersion"
         swarm-management="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'"
         standalone-management="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE' || applicationState.endpoint.mode.provider === 'VMWARE_VIC'"