refactor(azure): migrate module to react [EE-2782] (#6689)

* refactor(azure): migrate module to react [EE-2782] * fix(azure): remove optional chain * feat(azure): apply new icons in dashboard * feat(azure): apply new icons in dashboard * feat(ui): allow single string for breadcrumbs * refactor(azure/containers): use Table.content * feat(azure/containers): implement new ui [EE-3538] * fix(azure/containers): use correct icon * chore(tests): mock svg as component * fix(azure): fix tests Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>
2025-07-24 07:49:41 +02:00 · 2022-07-26 21:44:08 +02:00 · 2022-07-26 21:44:08 +02:00 · 82b848af0c
commit 82b848af0c
parent b059641c80
97 changed files with 1723 additions and 1430 deletions
--- a/app/react/azure/container-instances/ListView/ListView.tsx
+++ b/app/react/azure/container-instances/ListView/ListView.tsx
@ -0,0 +1,97 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { deleteContainerGroup } from '@/react/azure/services/container-groups.service';
+import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { EnvironmentId } from '@/portainer/environments/types';
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import { useContainerGroups } from '@/react/azure/queries/useContainerGroups';
+import { useSubscriptions } from '@/react/azure/queries/useSubscriptions';
+
+import { PageHeader } from '@@/PageHeader';
+import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+
+import { ContainersDatatable } from './ContainersDatatable';
+import { TableSettings } from './types';
+
+export function ListView() {
+  const defaultSettings: TableSettings = {
+    pageSize: 10,
+    sortBy: { id: 'state', desc: false },
+  };
+
+  const tableKey = 'containergroups';
+
+  const environmentId = useEnvironmentId();
+
+  const subscriptionsQuery = useSubscriptions(environmentId);
+
+  const groupsQuery = useContainerGroups(
+    environmentId,
+    subscriptionsQuery.data,
+    subscriptionsQuery.isSuccess
+  );
+
+  const { handleRemove } = useRemoveMutation(environmentId);
+
+  if (groupsQuery.isLoading || subscriptionsQuery.isLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <PageHeader
+        breadcrumbs="Container instances"
+        reload
+        title="Container list"
+      />
+      <TableSettingsProvider defaults={defaultSettings} storageKey={tableKey}>
+        <ContainersDatatable
+          tableKey={tableKey}
+          dataset={groupsQuery.containerGroups}
+          onRemoveClick={handleRemove}
+        />
+      </TableSettingsProvider>
+    </>
+  );
+}
+
+function useRemoveMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+
+  const deleteMutation = useMutation(
+    (containerGroupIds: string[]) =>
+      promiseSequence(
+        containerGroupIds.map(
+          (id) => () => deleteContainerGroup(environmentId, id)
+        )
+      ),
+
+    {
+      onSuccess() {
+        return queryClient.invalidateQueries([
+          'azure',
+          environmentId,
+          'subscriptions',
+        ]);
+      },
+      onError(err) {
+        notifyError(
+          'Failure',
+          err as Error,
+          'Unable to remove container groups'
+        );
+      },
+    }
+  );
+
+  return { handleRemove };
+
+  async function handleRemove(groupIds: string[]) {
+    deleteMutation.mutate(groupIds, {
+      onSuccess: () => {
+        notifySuccess('Container groups successfully removed');
+      },
+    });
+  }
+}