refactor(azure/aci): migrate dashboard view to react [EE-2189] (#6518)

* refactor(azure/aci): migrate dashboard view to react [EE-2189]

* move aggregate function to azure utils file

* fix type

* introduce dashboard item component

* add error notificatons

* hide resource groups widget if failed to load

* make dashboard a default export

* revert mistake

* refactor based on suggestions

* use object for error data instead of array

* return unused utils file

* move length calculations out of return statement

* only return first error of resource groups queries

* refactor imports/exports, fix bug with errors & add test

* WIP dashboard tests

* allow mocking multiple resource groups

* test for total number of resource groups

* update lock file to fix lint action issue

* finish dashboard tests

* dashboarditem story

* fix(auth): remove caching of user

* add option for link to dashboard item

* rename dashboard test case to match file

* remove optional link and update storybook

* create aria label based on already provided text

* change param name to be clearer

app/azure/_module.js

@@ -1,82 +1,85 @@
 import angular from 'angular';
 
+import { DashboardViewAngular } from './Dashboard/DashboardView';
 import { containerInstancesModule } from './ContainerInstances';
 
-angular.module('portainer.azure', ['portainer.app', containerInstancesModule]).config([
-  '$stateRegistryProvider',
-  function ($stateRegistryProvider) {
-    'use strict';
+angular
+  .module('portainer.azure', ['portainer.app', containerInstancesModule])
+  .config([
+    '$stateRegistryProvider',
+    function ($stateRegistryProvider) {
+      'use strict';
 
-    var azure = {
-      name: 'azure',
-      url: '/azure',
-      parent: 'endpoint',
-      abstract: true,
-      onEnter: /* @ngInject */ function onEnter($async, $state, endpoint, EndpointProvider, Notifications, StateManager) {
-        return $async(async () => {
-          if (endpoint.Type !== 3) {
-            $state.go('portainer.home');
-            return;
-          }
-          try {
-            EndpointProvider.setEndpointID(endpoint.Id);
-            EndpointProvider.setEndpointPublicURL(endpoint.PublicURL);
-            EndpointProvider.setOfflineModeFromStatus(endpoint.Status);
-            await StateManager.updateEndpointState(endpoint);
-          } catch (e) {
-            Notifications.error('Failed loading environment', e);
-            $state.go('portainer.home', {}, { reload: true });
-          }
-        });
-      },
-    };
-
-    var containerInstances = {
-      name: 'azure.containerinstances',
-      url: '/containerinstances',
-      views: {
-        'content@': {
-          templateUrl: './views/containerinstances/containerinstances.html',
-          controller: 'AzureContainerInstancesController',
+      var azure = {
+        name: 'azure',
+        url: '/azure',
+        parent: 'endpoint',
+        abstract: true,
+        onEnter: /* @ngInject */ function onEnter($async, $state, endpoint, EndpointProvider, Notifications, StateManager) {
+          return $async(async () => {
+            if (endpoint.Type !== 3) {
+              $state.go('portainer.home');
+              return;
+            }
+            try {
+              EndpointProvider.setEndpointID(endpoint.Id);
+              EndpointProvider.setEndpointPublicURL(endpoint.PublicURL);
+              EndpointProvider.setOfflineModeFromStatus(endpoint.Status);
+              await StateManager.updateEndpointState(endpoint, []);
+            } catch (e) {
+              Notifications.error('Failed loading environment', e);
+              $state.go('portainer.home', {}, { reload: true });
+            }
+          });
         },
-      },
-    };
+      };
 
-    var containerInstance = {
-      name: 'azure.containerinstances.container',
-      url: '/:id',
-      views: {
-        'content@': {
-          component: 'containerInstanceDetails',
+      var containerInstances = {
+        name: 'azure.containerinstances',
+        url: '/containerinstances',
+        views: {
+          'content@': {
+            templateUrl: './views/containerinstances/containerinstances.html',
+            controller: 'AzureContainerInstancesController',
+          },
         },
-      },
-    };
+      };
 
-    var containerInstanceCreation = {
-      name: 'azure.containerinstances.new',
-      url: '/new/',
-      views: {
-        'content@': {
-          component: 'createContainerInstanceView',
+      var containerInstance = {
+        name: 'azure.containerinstances.container',
+        url: '/:id',
+        views: {
+          'content@': {
+            component: 'containerInstanceDetails',
+          },
         },
-      },
-    };
+      };
 
-    var dashboard = {
-      name: 'azure.dashboard',
-      url: '/dashboard',
-      views: {
-        'content@': {
-          templateUrl: './views/dashboard/dashboard.html',
-          controller: 'AzureDashboardController',
+      var containerInstanceCreation = {
+        name: 'azure.containerinstances.new',
+        url: '/new/',
+        views: {
+          'content@': {
+            component: 'createContainerInstanceView',
+          },
         },
-      },
-    };
+      };
 
-    $stateRegistryProvider.register(azure);
-    $stateRegistryProvider.register(containerInstances);
-    $stateRegistryProvider.register(containerInstance);
-    $stateRegistryProvider.register(containerInstanceCreation);
-    $stateRegistryProvider.register(dashboard);
-  },
-]);
+      var dashboard = {
+        name: 'azure.dashboard',
+        url: '/dashboard',
+        views: {
+          'content@': {
+            component: 'dashboardView',
+          },
+        },
+      };
+
+      $stateRegistryProvider.register(azure);
+      $stateRegistryProvider.register(containerInstances);
+      $stateRegistryProvider.register(containerInstance);
+      $stateRegistryProvider.register(containerInstanceCreation);
+      $stateRegistryProvider.register(dashboard);
+    },
+  ])
+  .component('dashboardView', DashboardViewAngular).name;