refactor(edge/stacks): migrate envs table to react [EE-5613] (#9093)

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx

@@ -0,0 +1,113 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { HardDrive } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { EdgeStackStatus, StatusType } from '@/react/edge/edge-stacks/types';
+import { useEnvironmentList } from '@/react/portainer/environments/queries';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+import { useParamState } from '@/react/hooks/useParamState';
+
+import { Datatable } from '@@/datatables';
+import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+
+import { useEdgeStack } from '../../queries/useEdgeStack';
+
+import { EdgeStackEnvironment } from './types';
+import { columns } from './columns';
+
+export function EnvironmentsDatatable() {
+  const {
+    params: { stackId },
+  } = useCurrentStateAndParams();
+  const edgeStackQuery = useEdgeStack(stackId);
+
+  const [page, setPage] = useState(0);
+  const [statusFilter, setStatusFilter] = useParamState<StatusType>(
+    'status',
+    parseStatusFilter
+  );
+  const tableState = useTableStateWithoutStorage('name');
+  const endpointsQuery = useEnvironmentList({
+    pageLimit: tableState.pageSize,
+    page,
+    search: tableState.search,
+    sort: tableState.sortBy.id as 'Group' | 'Name',
+    order: tableState.sortBy.desc ? 'desc' : 'asc',
+    edgeStackId: stackId,
+    edgeStackStatus: statusFilter,
+  });
+
+  const environments: Array<EdgeStackEnvironment> = useMemo(
+    () =>
+      endpointsQuery.environments.map((env) => ({
+        ...env,
+        StackStatus:
+          edgeStackQuery.data?.Status[env.Id] ||
+          ({
+            Details: {
+              Pending: true,
+              Acknowledged: false,
+              ImagesPulled: false,
+              Error: false,
+              Ok: false,
+              RemoteUpdateSuccess: false,
+              Remove: false,
+            },
+            EndpointID: env.Id,
+            Error: '',
+          } satisfies EdgeStackStatus),
+      })),
+    [edgeStackQuery.data?.Status, endpointsQuery.environments]
+  );
+
+  return (
+    <Datatable
+      columns={columns}
+      isLoading={endpointsQuery.isLoading}
+      dataset={environments}
+      settingsManager={tableState}
+      title="Environments Status"
+      titleIcon={HardDrive}
+      onPageChange={setPage}
+      emptyContentLabel="No environment available."
+      disableSelect
+      description={
+        isBE && (
+          <div className="w-1/4">
+            <PortainerSelect<StatusType | undefined>
+              isClearable
+              bindToBody
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e || undefined)}
+              options={[
+                { value: 'Pending', label: 'Pending' },
+                { value: 'Acknowledged', label: 'Acknowledged' },
+                { value: 'ImagesPulled', label: 'Images pre-pulled' },
+                { value: 'Ok', label: 'Deployed' },
+                { value: 'Error', label: 'Failed' },
+              ]}
+            />
+          </div>
+        )
+      }
+    />
+  );
+}
+
+function parseStatusFilter(status: string | undefined): StatusType | undefined {
+  switch (status) {
+    case 'Pending':
+      return 'Pending';
+    case 'Acknowledged':
+      return 'Acknowledged';
+    case 'ImagesPulled':
+      return 'ImagesPulled';
+    case 'Ok':
+      return 'Ok';
+    case 'Error':
+      return 'Error';
+    default:
+      return undefined;
+  }
+}