refactor(endpoints): remove endpointProvider from views [EE-1136] (#5359)

[EE-1136]

app/agent/components/host-browser/hostBrowserController.js

@@ -141,8 +141,11 @@ export class HostBrowserController {
     return this.$async(this.onFileSelectedForUploadAsync, file);
   }
   async onFileSelectedForUploadAsync(file) {
+    if (!this.endpointId) {
+      throw new Error('missing endpoint id');
+    }
     try {
-      await this.HostBrowserService.upload(this.state.path, file);
+      await this.HostBrowserService.upload(this.endpointId, this.state.path, file);
       this.onFileUploaded();
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to upload file');

app/agent/components/host-browser/index.js

@@ -4,4 +4,7 @@ import { HostBrowserController } from './hostBrowserController';
 angular.module('portainer.agent').component('hostBrowser', {
   controller: HostBrowserController,
   templateUrl: './hostBrowser.html',
+  bindings: {
+    endpointId: '<',
+  },
 });

app/agent/components/volume-browser/index.js

@@ -9,5 +9,6 @@ angular.module('portainer.agent').component('volumeBrowser', {
     volumeId: '<',
     nodeName: '<',
     isUploadEnabled: '<',
+    endpointId: '<',
   },
 });

app/agent/components/volume-browser/volumeBrowserController.js

@@ -111,7 +111,7 @@ export class VolumeBrowserController {
   }
   async onFileSelectedForUploadAsync(file) {
     try {
-      await this.VolumeBrowserService.upload(this.state.path, file, this.volumeId);
+      await this.VolumeBrowserService.upload(this.endpointId, this.state.path, file, this.volumeId);
       this.onFileUploaded();
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to upload file');

app/agent/services/hostBrowserService.js

@@ -2,7 +2,8 @@ import angular from 'angular';
 
 angular.module('portainer.agent').factory('HostBrowserService', HostBrowserServiceFactory);
 
-function HostBrowserServiceFactory(Browse, Upload, API_ENDPOINT_ENDPOINTS, EndpointProvider, StateManager) {
+/* @ngInject */
+function HostBrowserServiceFactory(Browse, Upload, API_ENDPOINT_ENDPOINTS, StateManager) {
   return { ls, get, delete: deletePath, rename, upload };
 
   function ls(path) {
@@ -25,14 +26,14 @@ function HostBrowserServiceFactory(Browse, Upload, API_ENDPOINT_ENDPOINTS, Endpo
     return Browse.rename({}, payload).$promise;
   }
 
-  function upload(path, file, onProgress) {
+  function upload(endpointId, Path, file, onProgress) {
     const agentVersion = StateManager.getAgentApiVersion();
-    const url = `${API_ENDPOINT_ENDPOINTS}/${EndpointProvider.endpointID()}/docker${agentVersion > 1 ? '/v' + agentVersion : ''}/browse/put`;
+    const url = `${API_ENDPOINT_ENDPOINTS}/${endpointId}/docker${agentVersion > 1 ? '/v' + agentVersion : ''}/browse/put`;
 
     return new Promise((resolve, reject) => {
       Upload.upload({
         url: url,
-        data: { file: file, Path: path },
+        data: { file, Path },
       }).then(resolve, reject, onProgress);
     });
   }

app/agent/services/volumeBrowserService.js

@@ -2,7 +2,8 @@ import angular from 'angular';
 
 angular.module('portainer.agent').factory('VolumeBrowserService', VolumeBrowserServiceFactory);
 
-function VolumeBrowserServiceFactory(StateManager, Browse, BrowseVersion1, API_ENDPOINT_ENDPOINTS, EndpointProvider, Upload) {
+/* @ngInject */
+function VolumeBrowserServiceFactory(StateManager, Browse, BrowseVersion1, API_ENDPOINT_ENDPOINTS, Upload) {
   return {
     ls,
     get,
@@ -41,13 +42,13 @@ function VolumeBrowserServiceFactory(StateManager, Browse, BrowseVersion1, API_E
     return getBrowseService().rename({ volumeID: volumeId, version: getAgentApiVersion() }, payload).$promise;
   }
 
-  function upload(path, file, volumeId, onProgress) {
+  function upload(endpointId, path, file, volumeId, onProgress) {
     const agentVersion = StateManager.getAgentApiVersion();
     if (agentVersion < 2) {
       throw new Error('upload is not supported on this agent version');
     }
 
-    const url = `${API_ENDPOINT_ENDPOINTS}/${EndpointProvider.endpointID()}/docker/v${agentVersion}/browse/put?volumeID=${volumeId}`;
+    const url = `${API_ENDPOINT_ENDPOINTS}/${endpointId}/docker/v${agentVersion}/browse/put?volumeID=${volumeId}`;
 
     return new Promise((resolve, reject) => {
       Upload.upload({

app/docker/components/datatables/containers-datatable/containersDatatable.html

@@ -264,7 +264,7 @@
                   ng-if="item.Ports.length > 0"
                   ng-repeat="p in item.Ports | unique: 'public'"
                   class="image-tag"
-                  ng-href="http://{{ $ctrl.state.publicURL || p.host }}:{{ p.public }}"
+                  ng-href="http://{{ $ctrl.endpointPublicUrl || p.host }}:{{ p.public }}"
                   target="_blank"
                 >
                   <i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ p.public }}:{{ p.private }}

app/docker/components/datatables/containers-datatable/containersDatatable.js

@@ -13,5 +13,6 @@ angular.module('portainer.docker').component('containersDatatable', {
     offlineMode: '<',
     refreshCallback: '<',
     notAutoFocus: '<',
+    endpointPublicUrl: '<',
   },
 });

app/docker/components/datatables/containers-datatable/containersDatatableController.js

@@ -4,8 +4,7 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
   '$scope',
   '$controller',
   'DatatableService',
-  'EndpointProvider',
+  function ($scope, $controller, DatatableService) {
-  function ($scope, $controller, DatatableService, EndpointProvider) {
     angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
     var ctrl = this;
@@ -14,7 +13,6 @@ angular.module('portainer.docker').controller('ContainersDatatableController', [
       noStoppedItemsSelected: true,
       noRunningItemsSelected: true,
       noPausedItemsSelected: true,
-      publicURL: EndpointProvider.endpointPublicURL(),
     });
 
     this.settings = Object.assign(this.settings, {

app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.js

@@ -6,5 +6,6 @@ angular.module('portainer.docker').component('servicesDatatableActions', {
     selectedItemCount: '=',
     showUpdateAction: '<',
     showAddAction: '<',
+    endpointId: '<',
   },
 });

app/docker/components/datatables/services-datatable/actions/servicesDatatableActionsController.js

@@ -7,8 +7,9 @@ angular.module('portainer.docker').controller('ServicesDatatableActionsControlle
   'ModalService',
   'ImageHelper',
   'WebhookService',
-  'EndpointProvider',
+  function ($q, $state, ServiceService, ServiceHelper, Notifications, ModalService, ImageHelper, WebhookService) {
-  function ($q, $state, ServiceService, ServiceHelper, Notifications, ModalService, ImageHelper, WebhookService, EndpointProvider) {
+    const ctrl = this;
+
     this.scaleAction = function scaleService(service) {
       var config = ServiceHelper.serviceToConfig(service.Model);
       config.Mode.Replicated.Replicas = service.Replicas;
@@ -84,7 +85,7 @@ angular.module('portainer.docker').controller('ServicesDatatableActionsControlle
       angular.forEach(services, function (service) {
         ServiceService.remove(service)
           .then(function success() {
-            return WebhookService.webhooks(service.Id, EndpointProvider.endpointID());
+            return WebhookService.webhooks(service.Id, ctrl.endpointId);
           })
           .then(function success(data) {
             return $q.when(data.length !== 0 && WebhookService.deleteWebhook(data[0].Id));

app/docker/components/datatables/services-datatable/servicesDatatable.html

@@ -47,6 +47,7 @@
         selected-item-count="$ctrl.state.selectedItemCount"
         show-add-action="$ctrl.showAddAction"
         show-update-action="$ctrl.showUpdateAction"
+        endpoint-id="$ctrl.endpointId"
       ></services-datatable-actions>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
@@ -171,7 +172,7 @@
                   ng-if="item.Ports && item.Ports.length > 0 && p.PublishedPort"
                   ng-repeat="p in item.Ports"
                   class="image-tag"
-                  ng-href="http://{{ $ctrl.state.publicURL }}:{{ p.PublishedPort }}"
+                  ng-href="http://{{ $ctrl.endpointPublicUrl }}:{{ p.PublishedPort }}"
                   target="_blank"
                   ng-click="$event.stopPropagation();"
                 >

app/docker/components/datatables/services-datatable/servicesDatatable.js

@@ -16,5 +16,7 @@ angular.module('portainer.docker').component('servicesDatatable', {
     showTaskLogsButton: '<',
     refreshCallback: '<',
     notAutoFocus: '<',
+    endpointPublicUrl: '<',
+    endpointId: '<',
   },
 });

app/docker/components/datatables/services-datatable/servicesDatatableController.js

@@ -4,8 +4,7 @@ angular.module('portainer.docker').controller('ServicesDatatableController', [
   '$scope',
   '$controller',
   'DatatableService',
-  'EndpointProvider',
+  function ($scope, $controller, DatatableService) {
-  function ($scope, $controller, DatatableService, EndpointProvider) {
     angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
     var ctrl = this;
@@ -13,7 +12,6 @@ angular.module('portainer.docker').controller('ServicesDatatableController', [
     this.state = Object.assign(this.state, {
       expandAll: false,
       expandedItems: [],
-      publicURL: EndpointProvider.endpointPublicURL(),
     });
 
     this.expandAll = function () {

app/docker/views/containers/console/containerConsoleController.js

@@ -3,10 +3,10 @@ import { baseHref } from '@/portainer/helpers/pathHelper';
 
 angular.module('portainer.docker').controller('ContainerConsoleController', [
   '$scope',
+  '$state',
   '$transition$',
   'ContainerService',
   'ImageService',
-  'EndpointProvider',
   'Notifications',
   'ContainerHelper',
   'ExecService',
@@ -15,10 +15,10 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
   'CONSOLE_COMMANDS_LABEL_PREFIX',
   function (
     $scope,
+    $state,
     $transition$,
     ContainerService,
     ImageService,
-    EndpointProvider,
     Notifications,
     ContainerHelper,
     ExecService,
@@ -65,7 +65,7 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
 
           const params = {
             token: LocalStorage.getJWT(),
-            endpointId: EndpointProvider.endpointID(),
+            endpointId: $state.params.endpointId,
             id: attachId,
           };
 
@@ -106,7 +106,7 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
         .then(function success(data) {
           const params = {
             token: LocalStorage.getJWT(),
-            endpointId: EndpointProvider.endpointID(),
+            endpointId: $state.params.endpointId,
             id: data.Id,
           };
 

app/docker/views/containers/containers.html

@@ -19,6 +19,7 @@
       show-add-action="true"
       offline-mode="offlineMode"
       refresh-callback="getContainers"
+      endpoint-public-url="endpoint.PublicURL"
     ></containers-datatable>
   </div>
 </div>

app/docker/views/containers/containersController.js

@@ -1,29 +1,26 @@
-angular.module('portainer.docker').controller('ContainersController', [
+angular.module('portainer.docker').controller('ContainersController', ContainersController);
-  '$scope',
-  'ContainerService',
-  'Notifications',
-  'EndpointProvider',
-  function ($scope, ContainerService, Notifications, EndpointProvider) {
-    $scope.offlineMode = false;
 
-    $scope.getContainers = getContainers;
+/* @ngInject */
+function ContainersController($scope, ContainerService, Notifications, endpoint) {
+  $scope.offlineMode = endpoint.Status !== 1;
+  $scope.endpoint = endpoint;
 
-    function getContainers() {
+  $scope.getContainers = getContainers;
-      ContainerService.containers(1)
-        .then(function success(data) {
-          $scope.containers = data;
-          $scope.offlineMode = EndpointProvider.offlineMode();
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to retrieve containers');
-          $scope.containers = [];
-        });
-    }
 
-    function initView() {
+  function getContainers() {
-      getContainers();
+    ContainerService.containers(1)
-    }
+      .then(function success(data) {
+        $scope.containers = data;
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to retrieve containers');
+        $scope.containers = [];
+      });
+  }
 
-    initView();
+  function initView() {
-  },
+    getContainers();
-]);
+  }
+
+  initView();
+}

app/docker/views/dashboard/dashboardController.js

@@ -1,6 +1,8 @@
 import angular from 'angular';
 import _ from 'lodash';
 
+import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
+
 angular.module('portainer.docker').controller('DashboardController', [
   '$scope',
   '$q',
@@ -12,9 +14,7 @@ angular.module('portainer.docker').controller('DashboardController', [
   'SystemService',
   'ServiceService',
   'StackService',
-  'EndpointService',
   'Notifications',
-  'EndpointProvider',
   'StateManager',
   'TagService',
   'endpoint',
@@ -29,9 +29,7 @@ angular.module('portainer.docker').controller('DashboardController', [
     SystemService,
     ServiceService,
     StackService,
-    EndpointService,
     Notifications,
-    EndpointProvider,
     StateManager,
     TagService,
     endpoint
@@ -45,8 +43,7 @@ angular.module('portainer.docker').controller('DashboardController', [
 
     async function initView() {
       const endpointMode = $scope.applicationState.endpoint.mode;
-      const endpointId = EndpointProvider.endpointID();
+      $scope.endpoint = endpoint;
-      $scope.endpointId = endpointId;
 
       $scope.showStacks = await shouldShowStacks();
 
@@ -56,9 +53,8 @@ angular.module('portainer.docker').controller('DashboardController', [
         volumes: VolumeService.volumes(),
         networks: NetworkService.networks(true, true, true),
         services: endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER' ? ServiceService.services() : [],
-        stacks: StackService.stacks(true, endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER', endpointId),
+        stacks: StackService.stacks(true, endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER', endpoint.Id),
         info: SystemService.info(),
-        endpoint: EndpointService.endpoint(endpointId),
         tags: TagService.tags(),
       })
         .then(function success(data) {
@@ -69,11 +65,10 @@ angular.module('portainer.docker').controller('DashboardController', [
           $scope.serviceCount = data.services.length;
           $scope.stackCount = data.stacks.length;
           $scope.info = data.info;
-          $scope.endpoint = data.endpoint;
+          $scope.endpointTags = endpoint.TagIds.length
-          $scope.endpointTags = $scope.endpoint.TagIds.length
             ? _.join(
                 _.filter(
-                  _.map($scope.endpoint.TagIds, (id) => {
+                  _.map(endpoint.TagIds, (id) => {
                     const tag = data.tags.find((tag) => tag.Id === id);
                     return tag ? tag.Name : '';
                   }),
@@ -82,7 +77,7 @@ angular.module('portainer.docker').controller('DashboardController', [
                 ', '
               )
             : '-';
-          $scope.offlineMode = EndpointProvider.offlineMode();
+          $scope.offlineMode = isOfflineEndpoint(endpoint);
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to load dashboard data');

app/docker/views/host/host-browser-view/host-browser-view.html

@@ -7,6 +7,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <host-browser ng-if="$ctrl.host"></host-browser>
+    <host-browser ng-if="$ctrl.host" endpoint-id="$ctrl.endpoint.Id"></host-browser>
   </div>
 </div>

app/docker/views/host/host-browser-view/host-browser-view.js

@@ -1,4 +1,7 @@
 angular.module('portainer.docker').component('hostBrowserView', {
   templateUrl: './host-browser-view.html',
   controller: 'HostBrowserViewController',
+  bindings: {
+    endpoint: '<',
+  },
 });

app/docker/views/host/host-view-controller.js

@@ -1,3 +1,5 @@
+import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
+
 angular.module('portainer.docker').controller('HostViewController', [
   '$q',
   'SystemService',
@@ -6,8 +8,7 @@ angular.module('portainer.docker').controller('HostViewController', [
   'AgentService',
   'ContainerService',
   'Authentication',
-  'EndpointProvider',
+  function HostViewController($q, SystemService, Notifications, StateManager, AgentService, ContainerService, Authentication) {
-  function HostViewController($q, SystemService, Notifications, StateManager, AgentService, ContainerService, Authentication, EndpointProvider) {
     var ctrl = this;
 
     this.$onInit = initView;
@@ -39,7 +40,7 @@ angular.module('portainer.docker').controller('HostViewController', [
         .then(function success(data) {
           ctrl.engineDetails = buildEngineDetails(data);
           ctrl.hostDetails = buildHostDetails(data.info);
-          ctrl.state.offlineMode = EndpointProvider.offlineMode();
+          ctrl.state.offlineMode = isOfflineEndpoint(ctrl.endpoint);
           ctrl.jobs = data.jobs;
 
           if (ctrl.state.isAgent && agentApiVersion > 1) {

app/docker/views/images/imagesController.js

@@ -1,5 +1,6 @@
 import _ from 'lodash-es';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
 
 angular.module('portainer.docker').controller('ImagesController', [
   '$scope',
@@ -11,9 +12,8 @@ angular.module('portainer.docker').controller('ImagesController', [
   'HttpRequestHelper',
   'FileSaver',
   'Blob',
-  'EndpointProvider',
   'endpoint',
-  function ($scope, $state, Authentication, ImageService, Notifications, ModalService, HttpRequestHelper, FileSaver, Blob, EndpointProvider, endpoint) {
+  function ($scope, $state, Authentication, ImageService, Notifications, ModalService, HttpRequestHelper, FileSaver, Blob, endpoint) {
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
 
@@ -142,7 +142,7 @@ angular.module('portainer.docker').controller('ImagesController', [
       ImageService.images(true)
         .then(function success(data) {
           $scope.images = data;
-          $scope.offlineMode = EndpointProvider.offlineMode();
+          $scope.offlineMode = isOfflineEndpoint(endpoint);
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve images');

app/docker/views/networks/networksController.js

@@ -1,5 +1,6 @@
 import _ from 'lodash-es';
 import DockerNetworkHelper from 'Docker/helpers/networkHelper';
+import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
 
 angular.module('portainer.docker').controller('NetworksController', [
   '$q',
@@ -8,9 +9,9 @@ angular.module('portainer.docker').controller('NetworksController', [
   'NetworkService',
   'Notifications',
   'HttpRequestHelper',
-  'EndpointProvider',
+  'endpoint',
   'AgentService',
-  function ($q, $scope, $state, NetworkService, Notifications, HttpRequestHelper, EndpointProvider, AgentService) {
+  function ($q, $scope, $state, NetworkService, Notifications, HttpRequestHelper, endpoint, AgentService) {
     $scope.removeAction = function (selectedItems) {
       var actionCount = selectedItems.length;
       angular.forEach(selectedItems, function (network) {
@@ -65,7 +66,7 @@ angular.module('portainer.docker').controller('NetworksController', [
 
       $q.all(req)
         .then((data) => {
-          $scope.offlineMode = EndpointProvider.offlineMode();
+          $scope.offlineMode = isOfflineEndpoint(endpoint);
           const networks = _.forEach(data.networks, (item) => (item.Subs = []));
           if ($scope.applicationState.endpoint.mode.agentProxy && $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
             $scope.networks = groupSwarmNetworksManagerNodesFirst(data.networks, data.agents);

app/docker/views/nodes/node-browser/node-browser.html

@@ -7,6 +7,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <host-browser ng-if="$ctrl.node"></host-browser>
+    <host-browser ng-if="$ctrl.node" endpoint-id="$ctrl.endpoint.Id"></host-browser>
   </div>
 </div>

app/docker/views/nodes/node-browser/node-browser.js

@@ -1,4 +1,7 @@
 angular.module('portainer.docker').component('nodeBrowserView', {
   templateUrl: './node-browser.html',
   controller: 'NodeBrowserController',
+  bindings: {
+    endpoint: '<',
+  },
 });

app/docker/views/services/services.html

@@ -22,6 +22,8 @@
       show-add-action="true"
       show-stack-column="true"
       refresh-callback="getServices"
+      endpoint-public-url="endpoint.PublicURL"
+      endpoint-id="endpoint.Id"
     ></services-datatable>
   </div>
 </div>

app/docker/views/services/servicesController.js

@@ -8,8 +8,11 @@ angular.module('portainer.docker').controller('ServicesController', [
   'TaskHelper',
   'NodeService',
   'ContainerService',
-  function ($q, $scope, ServiceService, ServiceHelper, Notifications, TaskService, TaskHelper, NodeService, ContainerService) {
+  'endpoint',
+  function ($q, $scope, ServiceService, ServiceHelper, Notifications, TaskService, TaskHelper, NodeService, ContainerService, endpoint) {
     $scope.getServices = getServices;
+    $scope.endpoint = endpoint;
+
     function getServices() {
       var agentProxy = $scope.applicationState.endpoint.mode.agentProxy;
 

app/docker/views/volumes/browse/browseVolumeController.js

@@ -1,14 +1,13 @@
-angular.module('portainer.docker').controller('BrowseVolumeController', [
+angular.module('portainer.docker').controller('BrowseVolumeController', BrowseVolumeController);
-  '$scope',
-  '$transition$',
-  'StateManager',
-  function ($scope, $transition$, StateManager) {
-    function initView() {
-      $scope.volumeId = $transition$.params().id;
-      $scope.nodeName = $transition$.params().nodeName;
-      $scope.agentApiVersion = StateManager.getAgentApiVersion();
-    }
 
-    initView();
+/* @ngInject */
-  },
+function BrowseVolumeController($scope, $transition$, StateManager, endpoint) {
-]);
+  function initView() {
+    $scope.volumeId = $transition$.params().id;
+    $scope.nodeName = $transition$.params().nodeName;
+    $scope.agentApiVersion = StateManager.getAgentApiVersion();
+    $scope.endpointId = endpoint.Id;
+  }
+
+  initView();
+}

app/docker/views/volumes/browse/browsevolume.html

@@ -7,6 +7,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <volume-browser volume-id="volumeId" node-name="nodeName" is-upload-enabled="agentApiVersion > 1"></volume-browser>
+    <volume-browser volume-id="volumeId" node-name="nodeName" is-upload-enabled="agentApiVersion > 1" endpoint-id="endpointId"></volume-browser>
   </div>
 </div>

app/docker/views/volumes/volumesController.js

@@ -1,3 +1,5 @@
+import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
+
 angular.module('portainer.docker').controller('VolumesController', [
   '$q',
   '$scope',
@@ -7,11 +9,10 @@ angular.module('portainer.docker').controller('VolumesController', [
   'VolumeHelper',
   'Notifications',
   'HttpRequestHelper',
-  'EndpointProvider',
   'Authentication',
   'ModalService',
   'endpoint',
-  function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notifications, HttpRequestHelper, EndpointProvider, Authentication, ModalService, endpoint) {
+  function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notifications, HttpRequestHelper, Authentication, ModalService, endpoint) {
     $scope.removeAction = function (selectedItems) {
       ModalService.confirmDeletion('Do you want to remove the selected volume(s)?', (confirmed) => {
         if (confirmed) {
@@ -52,7 +53,7 @@ angular.module('portainer.docker').controller('VolumesController', [
       })
         .then(function success(data) {
           var services = data.services;
-          $scope.offlineMode = EndpointProvider.offlineMode();
+          $scope.offlineMode = isOfflineEndpoint(endpoint);
           $scope.volumes = data.attached
             .map(function (volume) {
               volume.dangling = false;

app/kubernetes/views/applications/console/console.js

@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationConsoleVi
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });

app/kubernetes/views/applications/console/consoleController.js

@@ -4,12 +4,11 @@ import { baseHref } from '@/portainer/helpers/pathHelper';
 
 class KubernetesApplicationConsoleController {
   /* @ngInject */
-  constructor($async, $state, Notifications, KubernetesApplicationService, EndpointProvider, LocalStorage) {
+  constructor($async, $state, Notifications, KubernetesApplicationService, LocalStorage) {
     this.$async = $async;
     this.$state = $state;
     this.Notifications = Notifications;
     this.KubernetesApplicationService = KubernetesApplicationService;
-    this.EndpointProvider = EndpointProvider;
     this.LocalStorage = LocalStorage;
 
     this.onInit = this.onInit.bind(this);
@@ -52,7 +51,7 @@ class KubernetesApplicationConsoleController {
   connectConsole() {
     const params = {
       token: this.LocalStorage.getJWT(),
-      endpointId: this.EndpointProvider.endpointID(),
+      endpointId: this.endpoint.Id,
       namespace: this.application.ResourcePool,
       podName: this.podName,
       containerName: this.containerName,

app/kubernetes/views/applications/edit/application.js

@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationView', {
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });

app/kubernetes/views/applications/edit/applicationController.js

@@ -112,7 +112,7 @@ class KubernetesApplicationController {
     KubernetesStackService,
     KubernetesPodService,
     KubernetesNodeService,
-    EndpointProvider,
+
     StackService
   ) {
     this.$async = $async;
@@ -131,7 +131,6 @@ class KubernetesApplicationController {
 
     this.KubernetesApplicationDeploymentTypes = KubernetesApplicationDeploymentTypes;
     this.KubernetesApplicationTypes = KubernetesApplicationTypes;
-    this.EndpointProvider = EndpointProvider;
     this.KubernetesDeploymentTypes = KubernetesDeploymentTypes;
 
     this.ApplicationDataAccessPolicies = KubernetesApplicationDataAccessPolicies;
@@ -365,7 +364,7 @@ class KubernetesApplicationController {
       placementWarning: false,
       expandedNote: false,
       useIngress: false,
-      useServerMetrics: this.EndpointProvider.currentEndpoint().Kubernetes.Configuration.UseServerMetrics,
+      useServerMetrics: this.endpoint.Kubernetes.Configuration.UseServerMetrics,
     };
 
     this.state.activeTab = this.LocalStorage.getActiveTab('application');

app/kubernetes/views/dashboard/dashboard.js

@@ -2,4 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesDashboardView', {
   templateUrl: './dashboard.html',
   controller: 'KubernetesDashboardController',
   controllerAs: 'ctrl',
+  bindings: {
+    endpoint: '<',
+  },
 });

app/kubernetes/views/dashboard/dashboardController.js

@@ -9,7 +9,6 @@ class KubernetesDashboardController {
     $async,
     Notifications,
     EndpointService,
-    EndpointProvider,
     KubernetesResourcePoolService,
     KubernetesApplicationService,
     KubernetesConfigurationService,
@@ -20,7 +19,6 @@ class KubernetesDashboardController {
     this.$async = $async;
     this.Notifications = Notifications;
     this.EndpointService = EndpointService;
-    this.EndpointProvider = EndpointProvider;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
     this.KubernetesApplicationService = KubernetesApplicationService;
     this.KubernetesConfigurationService = KubernetesConfigurationService;
@@ -37,16 +35,13 @@ class KubernetesDashboardController {
     const isAdmin = this.Authentication.isAdmin();
 
     try {
-      const endpointId = this.EndpointProvider.endpointID();
+      const [pools, applications, configurations, volumes, tags] = await Promise.all([
-      const [endpoint, pools, applications, configurations, volumes, tags] = await Promise.all([
-        this.EndpointService.endpoint(endpointId),
         this.KubernetesResourcePoolService.get(),
         this.KubernetesApplicationService.get(),
         this.KubernetesConfigurationService.get(),
         this.KubernetesVolumeService.get(),
         this.TagService.tags(),
       ]);
-      this.endpoint = endpoint;
       this.applications = applications;
       this.volumes = volumes;
 

app/kubernetes/views/deploy/deploy.js

@@ -2,4 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesDeployView', {
   templateUrl: './deploy.html',
   controller: 'KubernetesDeployController',
   controllerAs: 'ctrl',
+  bindings: {
+    endpoint: '<',
+  },
 });

app/kubernetes/views/deploy/deployController.js

@@ -8,26 +8,13 @@ import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, Kubernetes
 import { buildOption } from '@/portainer/components/box-selector';
 class KubernetesDeployController {
   /* @ngInject */
-  constructor(
+  constructor($async, $state, $window, Authentication, ModalService, Notifications, KubernetesResourcePoolService, StackService, WebhookHelper, CustomTemplateService) {
-    $async,
-    $state,
-    $window,
-    Authentication,
-    ModalService,
-    Notifications,
-    EndpointProvider,
-    KubernetesResourcePoolService,
-    StackService,
-    WebhookHelper,
-    CustomTemplateService
-  ) {
     this.$async = $async;
     this.$state = $state;
     this.$window = $window;
     this.Authentication = Authentication;
     this.ModalService = ModalService;
     this.Notifications = Notifications;
-    this.EndpointProvider = EndpointProvider;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
     this.StackService = StackService;
     this.WebhookHelper = WebhookHelper;
@@ -73,7 +60,6 @@ class KubernetesDeployController {
 
     this.ManifestDeployTypes = KubernetesDeployManifestTypes;
     this.BuildMethods = KubernetesDeployBuildMethods;
-    this.endpointId = this.EndpointProvider.endpointID();
 
     this.onChangeTemplateId = this.onChangeTemplateId.bind(this);
     this.deployAsync = this.deployAsync.bind(this);
@@ -246,7 +232,7 @@ class KubernetesDeployController {
         payload.ManifestURL = this.formValues.ManifestURL;
       }
 
-      await this.StackService.kubernetesDeploy(this.endpointId, method, payload);
+      await this.StackService.kubernetesDeploy(this.endpoint.Id, method, payload);
 
       this.Notifications.success('Manifest successfully deployed');
       this.state.isEditorDirty = false;

app/kubernetes/views/resource-pools/access/resourcePoolAccess.js

@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolAccessVi
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });

app/kubernetes/views/resource-pools/access/resourcePoolAccessController.js

@@ -6,15 +6,13 @@ import KubernetesConfigMapHelper from 'Kubernetes/helpers/configMapHelper';
 
 class KubernetesResourcePoolAccessController {
   /* @ngInject */
-  constructor($async, $state, Notifications, KubernetesResourcePoolService, KubernetesConfigMapService, EndpointProvider, EndpointService, GroupService, AccessService) {
+  constructor($async, $state, Notifications, KubernetesResourcePoolService, KubernetesConfigMapService, GroupService, AccessService) {
     this.$async = $async;
     this.$state = $state;
     this.Notifications = Notifications;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
     this.KubernetesConfigMapService = KubernetesConfigMapService;
 
-    this.EndpointProvider = EndpointProvider;
-    this.EndpointService = EndpointService;
     this.GroupService = GroupService;
     this.AccessService = AccessService;
 
@@ -36,6 +34,7 @@ class KubernetesResourcePoolAccessController {
    * Init
    */
   async onInit() {
+    const endpoint = this.endpoint;
     this.state = {
       actionInProgress: false,
       viewReady: false,
@@ -45,12 +44,9 @@ class KubernetesResourcePoolAccessController {
       multiselectOutput: [],
     };
 
-    this.endpointId = this.EndpointProvider.endpointID();
-
     try {
       const name = this.$transition$.params().id;
-      let [endpoint, pool, configMap] = await Promise.all([
+      let [pool, configMap] = await Promise.all([
-        this.EndpointService.endpoint(this.endpointId),
         this.KubernetesResourcePoolService.get(name),
         this.KubernetesConfigMapService.getAccess(KubernetesPortainerConfigMapNamespace, KubernetesPortainerConfigMapConfigName),
       ]);

app/kubernetes/views/volumes/volumes.js

@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesVolumesView', {
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });

app/kubernetes/views/volumes/volumesController.js

@@ -21,25 +21,13 @@ function computeSize(volumes) {
 
 class KubernetesVolumesController {
   /* @ngInject */
-  constructor(
+  constructor($async, $state, Notifications, Authentication, ModalService, LocalStorage, KubernetesStorageService, KubernetesVolumeService, KubernetesApplicationService) {
-    $async,
-    $state,
-    Notifications,
-    Authentication,
-    ModalService,
-    LocalStorage,
-    EndpointProvider,
-    KubernetesStorageService,
-    KubernetesVolumeService,
-    KubernetesApplicationService
-  ) {
     this.$async = $async;
     this.$state = $state;
     this.Notifications = Notifications;
     this.Authentication = Authentication;
     this.ModalService = ModalService;
     this.LocalStorage = LocalStorage;
-    this.EndpointProvider = EndpointProvider;
     this.KubernetesStorageService = KubernetesStorageService;
     this.KubernetesVolumeService = KubernetesVolumeService;
     this.KubernetesApplicationService = KubernetesApplicationService;
@@ -87,7 +75,7 @@ class KubernetesVolumesController {
       const [volumes, applications, storages] = await Promise.all([
         this.KubernetesVolumeService.get(),
         this.KubernetesApplicationService.get(),
-        this.KubernetesStorageService.get(this.state.endpointId),
+        this.KubernetesStorageService.get(this.endpoint.Id),
       ]);
 
       this.volumes = _.map(volumes, (volume) => {
@@ -107,9 +95,7 @@ class KubernetesVolumesController {
   async onInit() {
     this.state = {
       viewReady: false,
-      // endpointId: this.$transition$.params().endpointId, // TODO: use this when moving to endpointID in URL
       currentName: this.$state.$current.name,
-      endpointId: this.EndpointProvider.endpointID(),
       activeTab: this.LocalStorage.getActiveTab('volumes'),
       isAdmin: this.Authentication.isAdmin(),
     };

app/portainer/helpers/endpointHelper.js

@@ -35,3 +35,7 @@ export default class EndpointHelper {
     }
   }
 }
+
+export function isOfflineEndpoint(endpoint) {
+  return endpoint.Status !== 1;
+}

app/portainer/rest/stack.js

@@ -1,26 +1,25 @@
-angular.module('portainer.app').factory('Stack', [
+import angular from 'angular';
-  '$resource',
+
-  'EndpointProvider',
+angular.module('portainer.app').factory('Stack', StackFactory);
-  'API_ENDPOINT_STACKS',
+
-  function StackFactory($resource, EndpointProvider, API_ENDPOINT_STACKS) {
+/* @ngInject */
-    'use strict';
+function StackFactory($resource, API_ENDPOINT_STACKS) {
-    return $resource(
+  return $resource(
-      API_ENDPOINT_STACKS + '/:id/:action/:subaction',
+    API_ENDPOINT_STACKS + '/:id/:action',
-      {},
+    {},
-      {
+    {
-        get: { method: 'GET', params: { id: '@id' } },
+      get: { method: 'GET', params: { id: '@id' } },
-        query: { method: 'GET', isArray: true },
+      query: { method: 'GET', isArray: true },
-        create: { method: 'POST', ignoreLoadingBar: true },
+      create: { method: 'POST', ignoreLoadingBar: true },
-        update: { method: 'PUT', params: { id: '@id' }, ignoreLoadingBar: true },
+      update: { method: 'PUT', params: { id: '@id' }, ignoreLoadingBar: true },
-        associate: { method: 'PUT', params: { id: '@id', swarmId: '@swarmId', endpointId: '@endpointId', orphanedRunning: '@orphanedRunning', action: 'associate' } },
+      associate: { method: 'PUT', params: { id: '@id', swarmId: '@swarmId', endpointId: '@endpointId', orphanedRunning: '@orphanedRunning', action: 'associate' } },
-        remove: { method: 'DELETE', params: { id: '@id', external: '@external', endpointId: '@endpointId' } },
+      remove: { method: 'DELETE', params: { id: '@id', external: '@external', endpointId: '@endpointId' } },
-        getStackFile: { method: 'GET', params: { id: '@id', action: 'file' } },
+      getStackFile: { method: 'GET', params: { id: '@id', action: 'file' } },
-        migrate: { method: 'POST', params: { id: '@id', action: 'migrate', endpointId: '@endpointId' }, ignoreLoadingBar: true },
+      migrate: { method: 'POST', params: { id: '@id', action: 'migrate', endpointId: '@endpointId' }, ignoreLoadingBar: true },
-        start: { method: 'POST', params: { id: '@id', action: 'start' } },
+      start: { method: 'POST', params: { id: '@id', action: 'start' } },
-        stop: { method: 'POST', params: { id: '@id', action: 'stop' } },
+      stop: { method: 'POST', params: { id: '@id', action: 'stop' } },
-        updateGit: { method: 'PUT', params: { id: '@id', action: 'git', subaction: 'redeploy' } },
+      updateGit: { method: 'PUT', params: { id: '@id', action: 'git', subaction: 'redeploy' } },
-        updateGitStackSettings: { method: 'POST', params: { id: '@id', action: 'git' }, ignoreLoadingBar: true },
+      updateGitStackSettings: { method: 'POST', params: { id: '@id', action: 'git' }, ignoreLoadingBar: true },
-      }
+    }
-    );
+  );
-  },
+}
-]);

app/portainer/services/api/templateService.js

@@ -4,12 +4,13 @@ import { TemplateViewModel } from '../../models/template';
 angular.module('portainer.app').factory('TemplateService', TemplateServiceFactory);
 
 /* @ngInject */
-function TemplateServiceFactory($q, Templates, TemplateHelper, EndpointProvider, ImageHelper, ContainerHelper, EndpointService) {
+function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, ContainerHelper, EndpointService) {
-  var service = {};
+  var service = {
+    templates,
+  };
 
-  service.templates = function () {
+  function templates(endpointId) {
     const deferred = $q.defer();
-    const endpointId = EndpointProvider.currentEndpoint().Id;
 
     $q.all({
       templates: Templates.query().$promise,
@@ -36,7 +37,7 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, EndpointProvider,
       });
 
     return deferred.promise;
-  };
+  }
 
   service.templateFile = templateFile;
   function templateFile(repositoryUrl, composeFilePathInRepository) {

app/portainer/services/stateManager.js

@@ -1,236 +1,226 @@
 import moment from 'moment';
 
-angular.module('portainer.app').factory('StateManager', [
+angular.module('portainer.app').factory('StateManager', StateManagerFactory);
-  '$q',
-  '$async',
-  'SystemService',
-  'InfoHelper',
-  'LocalStorage',
-  'SettingsService',
-  'StatusService',
-  'APPLICATION_CACHE_VALIDITY',
-  'AgentPingService',
-  '$analytics',
-  'EndpointProvider',
-  function StateManagerFactory(
-    $q,
-    $async,
-    SystemService,
-    InfoHelper,
-    LocalStorage,
-    SettingsService,
-    StatusService,
-    APPLICATION_CACHE_VALIDITY,
-    AgentPingService,
-    $analytics,
-    EndpointProvider
-  ) {
-    var manager = {};
 
-    var state = {
+/* @ngInject */
-      loading: true,
+function StateManagerFactory(
-      application: {},
+  $async,
-      endpoint: {},
+  $q,
-      UI: {
+  SystemService,
-        dismissedInfoPanels: {},
+  InfoHelper,
-        dismissedInfoHash: '',
+  LocalStorage,
-      },
+  SettingsService,
-      extensions: [],
+  StatusService,
-    };
+  APPLICATION_CACHE_VALIDITY,
+  AgentPingService,
+  $analytics,
+  EndpointProvider
+) {
+  var manager = {};
 
-    manager.setVersionInfo = function (versionInfo) {
+  var state = {
-      state.application.versionStatus = versionInfo;
+    loading: true,
-      LocalStorage.storeApplicationState(state.application);
+    application: {},
-    };
+    endpoint: {},
+    UI: {
+      dismissedInfoPanels: {},
+      dismissedInfoHash: '',
+    },
+    extensions: [],
+  };
 
-    manager.dismissInformationPanel = function (id) {
+  manager.setVersionInfo = function (versionInfo) {
-      state.UI.dismissedInfoPanels[id] = true;
+    state.application.versionStatus = versionInfo;
-      LocalStorage.storeUIState(state.UI);
+    LocalStorage.storeApplicationState(state.application);
-    };
+  };
 
-    manager.dismissImportantInformation = function (hash) {
+  manager.dismissInformationPanel = function (id) {
-      state.UI.dismissedInfoHash = hash;
+    state.UI.dismissedInfoPanels[id] = true;
-      LocalStorage.storeUIState(state.UI);
+    LocalStorage.storeUIState(state.UI);
-    };
+  };
 
-    manager.getState = function () {
+  manager.dismissImportantInformation = function (hash) {
-      return state;
+    state.UI.dismissedInfoHash = hash;
-    };
+    LocalStorage.storeUIState(state.UI);
+  };
 
-    manager.clean = function () {
+  manager.getState = function () {
-      state.endpoint = {};
+    return state;
-      state.application = {};
+  };
-    };
 
-    manager.cleanEndpoint = function () {
+  manager.clean = function () {
-      state.endpoint = {};
+    state.endpoint = {};
-      EndpointProvider.clean();
+    state.application = {};
-    };
+  };
 
-    manager.updateLogo = function (logoURL) {
+  manager.cleanEndpoint = function () {
-      state.application.logo = logoURL;
+    state.endpoint = {};
-      LocalStorage.storeApplicationState(state.application);
+    EndpointProvider.clean();
-    };
+  };
 
-    manager.updateTheme = function (theme) {
+  manager.updateLogo = function (logoURL) {
-      state.application.theme = theme;
+    state.application.logo = logoURL;
-      LocalStorage.storeApplicationState(state.application);
+    LocalStorage.storeApplicationState(state.application);
-    };
+  };
 
-    manager.updateSnapshotInterval = function (interval) {
+  manager.updateTheme = function (theme) {
-      state.application.snapshotInterval = interval;
+    state.application.theme = theme;
-      LocalStorage.storeApplicationState(state.application);
+    LocalStorage.storeApplicationState(state.application);
-    };
+  };
 
-    manager.updateEnableEdgeComputeFeatures = function updateEnableEdgeComputeFeatures(enableEdgeComputeFeatures) {
+  manager.updateSnapshotInterval = function (interval) {
-      state.application.enableEdgeComputeFeatures = enableEdgeComputeFeatures;
+    state.application.snapshotInterval = interval;
-      LocalStorage.storeApplicationState(state.application);
+    LocalStorage.storeApplicationState(state.application);
-    };
+  };
 
-    manager.updateEnableTelemetry = function updateEnableTelemetry(enableTelemetry) {
+  manager.updateEnableEdgeComputeFeatures = function updateEnableEdgeComputeFeatures(enableEdgeComputeFeatures) {
-      state.application.enableTelemetry = enableTelemetry;
+    state.application.enableEdgeComputeFeatures = enableEdgeComputeFeatures;
-      $analytics.setOptOut(!enableTelemetry);
+    LocalStorage.storeApplicationState(state.application);
-      LocalStorage.storeApplicationState(state.application);
+  };
-    };
 
-    function assignStateFromStatusAndSettings(status, settings) {
+  manager.updateEnableTelemetry = function updateEnableTelemetry(enableTelemetry) {
-      state.application.version = status.Version;
+    state.application.enableTelemetry = enableTelemetry;
-      state.application.edition = status.Edition;
+    $analytics.setOptOut(!enableTelemetry);
-      state.application.instanceId = status.InstanceID;
+    LocalStorage.storeApplicationState(state.application);
+  };
 
-      state.application.enableTelemetry = settings.EnableTelemetry;
+  function assignStateFromStatusAndSettings(status, settings) {
-      state.application.logo = settings.LogoURL;
+    state.application.version = status.Version;
-      state.application.snapshotInterval = settings.SnapshotInterval;
+    state.application.edition = status.Edition;
-      state.application.enableEdgeComputeFeatures = settings.EnableEdgeComputeFeatures;
+    state.application.instanceId = status.InstanceID;
-      state.application.validity = moment().unix();
-    }
 
-    function loadApplicationState() {
+    state.application.enableTelemetry = settings.EnableTelemetry;
-      var deferred = $q.defer();
+    state.application.logo = settings.LogoURL;
+    state.application.snapshotInterval = settings.SnapshotInterval;
+    state.application.enableEdgeComputeFeatures = settings.EnableEdgeComputeFeatures;
+    state.application.validity = moment().unix();
+  }
 
-      $q.all({
+  function loadApplicationState() {
-        settings: SettingsService.publicSettings(),
+    var deferred = $q.defer();
-        status: StatusService.status(),
+
+    $q.all({
+      settings: SettingsService.publicSettings(),
+      status: StatusService.status(),
+    })
+      .then(function success(data) {
+        var status = data.status;
+        var settings = data.settings;
+        assignStateFromStatusAndSettings(status, settings);
+        LocalStorage.storeApplicationState(state.application);
+        deferred.resolve(state);
       })
-        .then(function success(data) {
+      .catch(function error(err) {
-          var status = data.status;
+        deferred.reject({ msg: 'Unable to retrieve server settings and status', err: err });
-          var settings = data.settings;
-          assignStateFromStatusAndSettings(status, settings);
-          LocalStorage.storeApplicationState(state.application);
-          deferred.resolve(state);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to retrieve server settings and status', err: err });
-        });
-
-      return deferred.promise;
-    }
-
-    manager.initialize = initialize;
-    async function initialize() {
-      return $async(async () => {
-        const UIState = LocalStorage.getUIState();
-        if (UIState) {
-          state.UI = UIState;
-        }
-
-        const endpointState = LocalStorage.getEndpointState();
-        if (endpointState) {
-          state.endpoint = endpointState;
-        }
-
-        const applicationState = LocalStorage.getApplicationState();
-        if (isAppStateValid(applicationState)) {
-          state.application = applicationState;
-        } else {
-          await loadApplicationState();
-        }
-
-        state.loading = false;
-        $analytics.setPortainerStatus(state.application.instanceId, state.application.version);
-        $analytics.setOptOut(!state.application.enableTelemetry);
-        return state;
       });
-    }
 
-    function isAppStateValid(appState) {
+    return deferred.promise;
-      if (!appState || !appState.validity) {
+  }
-        return false;
-      }
-      const now = moment().unix();
-      const cacheValidity = now - appState.validity;
-      return cacheValidity < APPLICATION_CACHE_VALIDITY;
-    }
 
-    function assignExtensions(endpointExtensions) {
+  manager.initialize = initialize;
-      var extensions = [];
+  async function initialize() {
-
+    return $async(async () => {
-      for (var i = 0; i < endpointExtensions.length; i++) {
+      const UIState = LocalStorage.getUIState();
-        var extension = endpointExtensions[i];
+      if (UIState) {
-        if (extension.Type === 1) {
+        state.UI = UIState;
-          extensions.push('storidge');
-        }
       }
 
-      return extensions;
+      const endpointState = LocalStorage.getEndpointState();
-    }
+      if (endpointState) {
-
+        state.endpoint = endpointState;
-    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;
-      } else if (endpoint.Type === 5 || endpoint.Type === 6 || endpoint.Type === 7) {
-        state.endpoint.name = endpoint.Name;
-        state.endpoint.mode = { provider: 'KUBERNETES' };
-        LocalStorage.storeEndpointState(state.endpoint);
-        deferred.resolve();
-        return deferred.promise;
       }
 
-      const reload = endpoint.Status === 1 || !endpoint.Snaphosts || !endpoint.Snaphosts.length || !endpoint.Snapshots[0].SnapshotRaw;
+      const applicationState = LocalStorage.getApplicationState();
+      if (isAppStateValid(applicationState)) {
+        state.application = applicationState;
+      } else {
+        await loadApplicationState();
+      }
 
-      $q.all({
+      state.loading = false;
-        version: reload ? SystemService.version() : $q.when(endpoint.Snapshots[0].SnapshotRaw.Version),
+      $analytics.setPortainerStatus(state.application.instanceId, state.application.version);
-        info: reload ? SystemService.info() : $q.when(endpoint.Snapshots[0].SnapshotRaw.Info),
+      $analytics.setOptOut(!state.application.enableTelemetry);
-      })
+      return state;
-        .then(function success(data) {
+    });
-          var endpointMode = InfoHelper.determineEndpointMode(data.info, endpoint.Type);
+  }
-          var endpointAPIVersion = parseFloat(data.version.ApiVersion);
-          state.endpoint.mode = endpointMode;
-          state.endpoint.name = endpoint.Name;
-          state.endpoint.type = endpoint.Type;
-          state.endpoint.apiVersion = endpointAPIVersion;
-          state.endpoint.extensions = assignExtensions(extensions);
 
-          if (endpointMode.agentProxy && endpoint.Status === 1) {
+  function isAppStateValid(appState) {
-            return AgentPingService.ping().then(function onPingSuccess(data) {
+    if (!appState || !appState.validity) {
-              state.endpoint.agentApiVersion = data.version;
+      return false;
-            });
+    }
-          }
+    const now = moment().unix();
-        })
+    const cacheValidity = now - appState.validity;
-        .then(function () {
+    return cacheValidity < APPLICATION_CACHE_VALIDITY;
-          LocalStorage.storeEndpointState(state.endpoint);
+  }
-          deferred.resolve();
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to connect to the Docker environment', err: err });
-        })
-        .finally(function final() {
-          state.loading = false;
-        });
 
+  function assignExtensions(endpointExtensions) {
+    var extensions = [];
+
+    for (var i = 0; i < endpointExtensions.length; i++) {
+      var extension = endpointExtensions[i];
+      if (extension.Type === 1) {
+        extensions.push('storidge');
+      }
+    }
+
+    return extensions;
+  }
+
+  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;
-    };
+    } else if (endpoint.Type === 5 || endpoint.Type === 6 || endpoint.Type === 7) {
+      state.endpoint.name = endpoint.Name;
+      state.endpoint.mode = { provider: 'KUBERNETES' };
+      LocalStorage.storeEndpointState(state.endpoint);
+      deferred.resolve();
+      return deferred.promise;
+    }
 
-    manager.getAgentApiVersion = function getAgentApiVersion() {
+    const reload = endpoint.Status === 1 || !endpoint.Snaphosts || !endpoint.Snaphosts.length || !endpoint.Snapshots[0].SnapshotRaw;
-      return state.endpoint.agentApiVersion;
-    };
 
-    return manager;
+    $q.all({
-  },
+      version: reload ? SystemService.version() : $q.when(endpoint.Snapshots[0].SnapshotRaw.Version),
-]);
+      info: reload ? SystemService.info() : $q.when(endpoint.Snapshots[0].SnapshotRaw.Info),
+    })
+      .then(function success(data) {
+        var endpointMode = InfoHelper.determineEndpointMode(data.info, endpoint.Type);
+        var endpointAPIVersion = parseFloat(data.version.ApiVersion);
+        state.endpoint.mode = endpointMode;
+        state.endpoint.name = endpoint.Name;
+        state.endpoint.type = endpoint.Type;
+        state.endpoint.apiVersion = endpointAPIVersion;
+        state.endpoint.extensions = assignExtensions(extensions);
+
+        if (endpointMode.agentProxy && endpoint.Status === 1) {
+          return AgentPingService.ping().then(function onPingSuccess(data) {
+            state.endpoint.agentApiVersion = data.version;
+          });
+        }
+      })
+      .then(function () {
+        LocalStorage.storeEndpointState(state.endpoint);
+        deferred.resolve();
+      })
+      .catch(function error(err) {
+        deferred.reject({ msg: 'Unable to connect to the Docker environment', err: err });
+      })
+      .finally(function final() {
+        state.loading = false;
+      });
+
+    return deferred.promise;
+  };
+
+  manager.getAgentApiVersion = function getAgentApiVersion() {
+    return state.endpoint.agentApiVersion;
+  };
+
+  return manager;
+}

app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js

@@ -11,7 +11,6 @@ class CustomTemplatesViewController {
     $state,
     Authentication,
     CustomTemplateService,
-    EndpointProvider,
     FormValidator,
     ModalService,
     NetworkService,
@@ -26,7 +25,6 @@ class CustomTemplatesViewController {
     this.$state = $state;
     this.Authentication = Authentication;
     this.CustomTemplateService = CustomTemplateService;
-    this.EndpointProvider = EndpointProvider;
     this.FormValidator = FormValidator;
     this.ModalService = ModalService;
     this.NetworkService = NetworkService;
@@ -132,7 +130,7 @@ class CustomTemplatesViewController {
     }
     const stackName = this.formValues.name;
 
-    const endpointId = this.EndpointProvider.endpointID();
+    const endpointId = this.endpoint.Id;
 
     this.state.actionInProgress = true;
 

app/portainer/views/custom-templates/custom-templates-view/index.js

@@ -3,4 +3,7 @@ import CustomTemplatesViewController from './customTemplatesViewController.js';
 angular.module('portainer.app').component('customTemplatesView', {
   templateUrl: './customTemplatesView.html',
   controller: CustomTemplatesViewController,
+  bindings: {
+    endpoint: '<',
+  },
 });

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

@@ -19,7 +19,6 @@ function EndpointController(
   EndpointService,
   GroupService,
   TagService,
-  EndpointProvider,
   Notifications,
   Authentication,
   SettingsService,
@@ -191,7 +190,6 @@ function EndpointController(
     EndpointService.updateEndpoint(endpoint.Id, payload).then(
       function success() {
         Notifications.success('Environment updated', $scope.endpoint.Name);
-        EndpointProvider.setEndpointPublicURL(endpoint.PublicURL);
         $state.go('portainer.endpoints', {}, { reload: true });
       },
       function error(err) {

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

@@ -9,12 +9,11 @@ require('./includes/agent.html');
 
 class InitEndpointController {
   /* @ngInject */
-  constructor($async, $scope, $state, EndpointService, EndpointProvider, StateManager, Notifications) {
+  constructor($async, $scope, $state, EndpointService, StateManager, Notifications) {
     this.$async = $async;
     this.$scope = $scope;
     this.$state = $state;
     this.EndpointService = EndpointService;
-    this.EndpointProvider = EndpointProvider;
     this.StateManager = StateManager;
     this.Notifications = Notifications;
 

app/portainer/views/registries/create/createRegistryController.js

@@ -3,8 +3,8 @@ import { RegistryCreateFormValues } from 'Portainer/models/registry';
 
 class CreateRegistryController {
   /* @ngInject */
-  constructor($async, $state, EndpointProvider, Notifications, RegistryService, RegistryGitlabService) {
+  constructor($async, $state, Notifications, RegistryService, RegistryGitlabService) {
-    Object.assign(this, { $async, $state, EndpointProvider, Notifications, RegistryService, RegistryGitlabService });
+    Object.assign(this, { $async, $state, Notifications, RegistryService, RegistryGitlabService });
 
     this.RegistryTypes = RegistryTypes;
     this.state = {
@@ -17,6 +17,7 @@ class CreateRegistryController {
         selectedItems: [],
       },
       originViewReference: 'portainer.registries',
+      originalEndpointId: null,
     };
 
     this.createRegistry = this.createRegistry.bind(this);
@@ -105,7 +106,7 @@ class CreateRegistryController {
         this.state.actionInProgress = true;
         await this.RegistryService.createGitlabRegistries(this.model, this.state.gitlab.selectedItems);
         this.Notifications.success('Registries successfully created');
-        this.$state.go(this.state.originViewReference, { endpointId: this.EndpointProvider.endpointID() });
+        this.$state.go(this.state.originViewReference, { endpointId: this.state.originalEndpointId });
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to create registries');
         this.state.actionInProgress = false;
@@ -119,7 +120,7 @@ class CreateRegistryController {
         this.state.actionInProgress = true;
         await this.RegistryService.createRegistry(this.model);
         this.Notifications.success('Registry successfully created');
-        this.$state.go(this.state.originViewReference, { endpointId: this.EndpointProvider.endpointID() });
+        this.$state.go(this.state.originViewReference, { endpointId: this.state.originalEndpointId });
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to create registry');
         this.state.actionInProgress = false;
@@ -130,9 +131,12 @@ class CreateRegistryController {
   $onInit() {
     this.model = new RegistryCreateFormValues();
 
-    const origin = this.$transition$.originalTransition().from();
+    const from = this.$transition$.from();
-    if (origin.name && /^[a-z]+\.registries$/.test(origin.name)) {
+    const params = this.$transition$.params('from');
-      this.state.originViewReference = origin;
+
+    if (from.name && /^[a-z]+\.registries$/.test(from.name)) {
+      this.state.originViewReference = from;
+      this.state.originalEndpointId = params.endpointId || null;
     }
   }
 }

app/portainer/views/stacks/create/createStackController.js

@@ -19,13 +19,13 @@ angular
     FormValidator,
     ResourceControlService,
     FormHelper,
-    EndpointProvider,
     StackHelper,
     ContainerHelper,
     CustomTemplateService,
     ContainerService,
     WebhookHelper,
-    clipboard
+    clipboard,
+    endpoint
   ) {
     $scope.onChangeTemplateId = onChangeTemplateId;
     $scope.buildAnalyticsProperties = buildAnalyticsProperties;
@@ -307,12 +307,7 @@ angular
         $scope.state.StackType = 1;
       }
 
-      try {
+      $scope.composeSyntaxMaxVersion = endpoint.ComposeSyntaxMaxVersion;
-        const endpoint = EndpointProvider.currentEndpoint();
-        $scope.composeSyntaxMaxVersion = endpoint.ComposeSyntaxMaxVersion;
-      } catch (err) {
-        Notifications.error('Failure', err, 'Unable to retrieve the ComposeSyntaxMaxVersion');
-      }
 
       try {
         const containers = await ContainerService.containers(true);

app/portainer/views/stacks/edit/stack.html

@@ -116,7 +116,7 @@
                 ng-if="regular && endpoints.length > 0"
                 endpoints="endpoints"
                 groups="groups"
-                current-endpoint-id="currentEndpointId"
+                current-endpoint-id="endpoint.Id"
                 on-duplicate="duplicateStack(name, endpointId)"
                 on-migrate="migrateStack(name, endpointId)"
                 yaml-error="state.yamlError"
@@ -216,6 +216,7 @@
       show-host-column="false"
       show-add-action="false"
       not-auto-focus="true"
+      endpoint-public-url="endpoint.PublicURL"
     ></containers-datatable>
   </div>
 </div>
@@ -236,6 +237,8 @@
       show-add-action="false"
       show-stack-column="false"
       not-auto-focus="true"
+      endpoint-public-url="endpoint.PublicURL"
+      endpoint-id="endpoint.Id"
     ></services-datatable>
   </div>
 </div>

app/portainer/views/stacks/edit/stackController.js

@@ -24,6 +24,7 @@ angular.module('portainer.app').controller('StackController', [
   'ResourceControlService',
   'Authentication',
   'ContainerHelper',
+  'endpoint',
   function (
     $async,
     $q,
@@ -47,8 +48,10 @@ angular.module('portainer.app').controller('StackController', [
     StackHelper,
     ResourceControlService,
     Authentication,
-    ContainerHelper
+    ContainerHelper,
+    endpoint
   ) {
+    $scope.endpoint = endpoint;
     $scope.state = {
       actionInProgress: false,
       migrationInProgress: false,
@@ -79,16 +82,18 @@ angular.module('portainer.app').controller('StackController', [
       $scope.formValues.Env = value;
     }
 
-    $scope.duplicateStack = function duplicateStack(name, endpointId) {
+    $scope.duplicateStack = function duplicateStack(name, targetEndpointId) {
       var stack = $scope.stack;
       var env = FormHelper.removeInvalidEnvVars($scope.formValues.Env);
-      EndpointProvider.setEndpointID(endpointId);
+      // sets the targetEndpointID as global for interceptors
+      EndpointProvider.setEndpointID(targetEndpointId);
 
-      return StackService.duplicateStack(name, $scope.stackFileContent, env, endpointId, stack.Type).then(onDuplicationSuccess).catch(notifyOnError);
+      return StackService.duplicateStack(name, $scope.stackFileContent, env, targetEndpointId, stack.Type).then(onDuplicationSuccess).catch(notifyOnError);
 
       function onDuplicationSuccess() {
         Notifications.success('Stack successfully duplicated');
         $state.go('docker.stacks', {}, { reload: true });
+        // sets back the original endpointID as global for interceptors
         EndpointProvider.setEndpointID(stack.EndpointId);
       }
 
@@ -132,11 +137,10 @@ angular.module('portainer.app').controller('StackController', [
       });
     };
 
-    function migrateStack(name, endpointId) {
+    function migrateStack(name, targetEndpointId) {
-      var stack = $scope.stack;
+      const stack = $scope.stack;
-      var targetEndpointId = endpointId;
 
-      var migrateRequest = StackService.migrateSwarmStack;
+      let migrateRequest = StackService.migrateSwarmStack;
       if (stack.Type === 2) {
         migrateRequest = StackService.migrateComposeStack;
       }
@@ -145,9 +149,8 @@ angular.module('portainer.app').controller('StackController', [
       // The EndpointID property is not available for these stacks, we can pass
       // the current endpoint identifier as a part of the migrate request. It will be used if
       // the EndpointID property is not defined on the stack.
-      var originalEndpointId = EndpointProvider.endpointID();
       if (stack.EndpointId === 0) {
-        stack.EndpointId = originalEndpointId;
+        stack.EndpointId = endpoint.Id;
       }
 
       $scope.state.migrationInProgress = true;
@@ -213,9 +216,8 @@ angular.module('portainer.app').controller('StackController', [
       // The EndpointID property is not available for these stacks, we can pass
       // the current endpoint identifier as a part of the update request. It will be used if
       // the EndpointID property is not defined on the stack.
-      var endpointId = EndpointProvider.endpointID();
       if (stack.EndpointId === 0) {
-        stack.EndpointId = endpointId;
+        stack.EndpointId = endpoint.Id;
       }
 
       $scope.state.actionInProgress = true;
@@ -433,8 +435,6 @@ angular.module('portainer.app').controller('StackController', [
       var stackName = $transition$.params().name;
       $scope.stackName = stackName;
 
-      $scope.currentEndpointId = EndpointProvider.endpointID();
-
       const regular = $transition$.params().regular == 'true';
       $scope.regular = regular;
 
@@ -456,12 +456,7 @@ angular.module('portainer.app').controller('StackController', [
         loadStack(stackId);
       }
 
-      try {
+      $scope.composeSyntaxMaxVersion = endpoint.ComposeSyntaxMaxVersion;
-        const endpoint = EndpointProvider.currentEndpoint();
-        $scope.composeSyntaxMaxVersion = endpoint.ComposeSyntaxMaxVersion;
-      } catch (err) {
-        Notifications.error('Failure', err, 'Unable to retrieve the ComposeSyntaxMaxVersion');
-      }
 
       $scope.stackType = $transition$.params().type;
     }

app/portainer/views/stacks/stacksController.js

@@ -1,7 +1,9 @@
+import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
+
 angular.module('portainer.app').controller('StacksController', StacksController);
 
 /* @ngInject */
-function StacksController($scope, $state, Notifications, StackService, ModalService, EndpointProvider, Authentication, endpoint) {
+function StacksController($scope, $state, Notifications, StackService, ModalService, Authentication, endpoint) {
   $scope.removeAction = function (selectedItems) {
     ModalService.confirmDeletion('Do you want to remove the selected stack(s)? Associated services will be removed as well.', function onConfirm(confirmed) {
       if (!confirmed) {
@@ -12,8 +14,8 @@ function StacksController($scope, $state, Notifications, StackService, ModalServ
   };
 
   function deleteSelectedStacks(stacks) {
-    var endpointId = EndpointProvider.endpointID();
+    const endpointId = endpoint.Id;
-    var actionCount = stacks.length;
+    let actionCount = stacks.length;
     angular.forEach(stacks, function (stack) {
       StackService.remove(stack, stack.External, endpointId)
         .then(function success() {
@@ -39,15 +41,14 @@ function StacksController($scope, $state, Notifications, StackService, ModalServ
   $scope.getStacks = getStacks;
 
   function getStacks() {
-    var endpointMode = $scope.applicationState.endpoint.mode;
+    const endpointMode = $scope.applicationState.endpoint.mode;
-    var endpointId = EndpointProvider.endpointID();
+    const endpointId = endpoint.Id;
 
     const includeOrphanedStacks = Authentication.isAdmin();
     StackService.stacks(true, endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER', endpointId, includeOrphanedStacks)
-      .then(function success(data) {
+      .then(function success(stacks) {
-        var stacks = data;
         $scope.stacks = stacks;
-        $scope.offlineMode = EndpointProvider.offlineMode();
+        $scope.offlineMode = isOfflineEndpoint(endpoint);
       })
       .catch(function error(err) {
         $scope.stacks = [];

app/portainer/views/templates/templatesController.js

@@ -276,9 +276,10 @@ angular.module('portainer.app').controller('TemplatesController', [
 
       var endpointMode = $scope.applicationState.endpoint.mode;
       var apiVersion = $scope.applicationState.endpoint.apiVersion;
+      const endpointId = +$state.params.endpointId;
 
       $q.all({
-        templates: TemplateService.templates(),
+        templates: TemplateService.templates(endpointId),
         volumes: VolumeService.getVolumes(),
         networks: NetworkService.networks(
           endpointMode.provider === 'DOCKER_STANDALONE' || endpointMode.provider === 'DOCKER_SWARM_MODE',
@@ -296,7 +297,7 @@ angular.module('portainer.app').controller('TemplatesController', [
         })
         .catch(function error(err) {
           $scope.templates = [];
-          Notifications.error('Failure', err, 'An error occured during apps initialization.');
+          Notifications.error('Failure', err, 'An error occurred during apps initialization.');
         });
     }