refactor(environments): migrate table to react [EE-4702] (#8882)

app/portainer/__module.js

@@ -171,7 +171,7 @@ angular
         url: '/endpoints',
         views: {
           'content@': {
-            component: 'endpointsView',
+            component: 'environmentsListView',
           },
         },
       };

app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html

@@ -1,167 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-
-          {{ $ctrl.titleText }}
-        </div>
-        <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" class="searchIcon"></pr-icon>
-          <input
-            type="text"
-            class="searchInput"
-            auto-focus
-            placeholder="Search..."
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            ng-model-options="{ debounce: 300 }"
-            data-cy="endpoint-searchInput"
-          />
-        </div>
-        <div class="actionBar !gap-3">
-          <button
-            type="button"
-            class="btn btn-sm btn-dangerlight h-fit"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
-            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-            data-cy="endpoint-removeEndpointButton"
-          >
-            <pr-icon icon="'trash-2'" class-name="'icon-white'"></pr-icon>
-            <span>Remove</span>
-          </button>
-
-          <import-fdo-device-button></import-fdo-device-button>
-
-          <button ng-if="$ctrl.isBE" type="button" class="btn btn-sm btn-secondary vertical-center" ui-sref="portainer.endpoints.edgeAutoCreateScript">
-            <pr-icon icon="'plus'"></pr-icon>
-            <span>Generate AEEC script</span>
-          </button>
-
-          <button
-            type="button"
-            class="btn btn-sm btn-primary vertical-center"
-            ng-click="$ctrl.setReferrer()"
-            ui-sref="portainer.wizard.endpoints"
-            data-cy="endpoint-addEndpointButton"
-          >
-            <pr-icon icon="'plus'" class-name="'icon-white'"></pr-icon>
-            <span>Add environment</span>
-          </button>
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table" data-cy="endpoint-endpointTable">
-          <thead>
-            <tr>
-              <th>
-                <div class="vertical-center">
-                  <span class="md-checkbox vertical-center">
-                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                    <label for="select_all"></label>
-                  </span>
-                  <table-column-header
-                    col-title="'Name'"
-                    can-sort="true"
-                    is-sorted="$ctrl.state.orderBy === 'Name'"
-                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                    ng-click="$ctrl.changeOrderBy('Name')"
-                  ></table-column-header>
-                </div>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Type'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Type'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Type')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'URL'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'URL'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('URL')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'GroupName'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'GroupName'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('GroupName')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header col-title="'Actions'" can-sort="false"></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in $ctrl.state.filteredDataSet | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit"
-              total-items="$ctrl.state.totalFilteredDataSet"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>
-                <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                <a ui-sref="portainer.endpoints.endpoint({id: item.Id})">{{ item.Name }}</a>
-              </td>
-              <td>
-                <span>
-                  <i ng-class="item.Type | endpointtypeicon" aria-hidden="true" style="margin-right: 2px"></i>
-                  {{ item.Type | endpointtypename }}
-                </span>
-              </td>
-              <td>
-                <span ng-if="item.Type !== 4">{{ item.URL | stripprotocol }}</span>
-                <span ng-if="item.Type === 4">-</span>
-              </td>
-              <td>{{ item.GroupName }}</td>
-              <td>
-                <a ui-sref="portainer.endpoints.endpoint.access({id: item.Id})">
-                  <pr-icon icon="'users'"></pr-icon>
-                  Manage access
-                </a>
-              </td>
-            </tr>
-            <tr ng-if="$ctrl.state.loading">
-              <td colspan="5" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="!$ctrl.state.loading && $ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-muted text-center">No environment available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="!$ctrl.state.loading">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline vertical-center">
-            <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5" on-page-change="$ctrl.onPageChange(newPageNumber, oldPageNumber)"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>

app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.js

@@ -1,13 +0,0 @@
-angular.module('portainer.app').component('endpointsDatatable', {
-  templateUrl: './endpointsDatatable.html',
-  controller: 'EndpointsDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    removeAction: '<',
-    retrievePage: '<',
-  },
-});

app/portainer/components/datatables/endpoints-datatable/endpointsDatatableController.js

@@ -1,108 +0,0 @@
-import _ from 'lodash-es';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
-
-angular.module('portainer.app').controller('EndpointsDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  'PaginationService',
-  function ($scope, $controller, DatatableService, PaginationService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    this.isBE = isBE;
-
-    this.state = Object.assign(this.state, {
-      orderBy: this.orderBy,
-      loading: true,
-      filteredDataSet: [],
-      totalFilteredDataset: 0,
-      pageNumber: 1,
-    });
-
-    this.paginationChanged = async function () {
-      try {
-        this.state.loading = true;
-        this.state.filteredDataSet = [];
-        const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
-        const { endpoints, totalCount } = await this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter);
-        this.state.filteredDataSet = endpoints;
-        this.state.totalFilteredDataSet = totalCount;
-        this.refreshSelectedItems();
-      } finally {
-        this.state.loading = false;
-      }
-    };
-
-    this.onPageChange = function (newPageNumber) {
-      this.state.pageNumber = newPageNumber;
-      this.paginationChanged();
-    };
-
-    this.setReferrer = function () {
-      window.localStorage.setItem('wizardReferrer', 'environments');
-    };
-
-    /**
-     * Overridden
-     */
-    this.onTextFilterChange = function () {
-      var filterValue = this.state.textFilter;
-      DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
-      this.resetSelectionState();
-      this.paginationChanged();
-    };
-
-    /**
-     * Overriden
-     */
-    this.uniq = function () {
-      return _.uniqBy(_.concat(this.state.filteredDataSet, this.state.selectedItems), 'Id');
-    };
-
-    /**
-     * Overridden
-     */
-    this.changePaginationLimit = function () {
-      PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
-      this.paginationChanged();
-    };
-
-    this.refreshSelectedItems = function () {
-      _.forEach(this.state.filteredDataSet, (item) => {
-        if (_.filter(this.state.selectedItems, (i) => i.Id == item.Id).length > 0) {
-          item.Checked = true;
-        }
-      });
-    };
-
-    /**
-     * Overridden
-     */
-    this.$onInit = function () {
-      this.setDefaults();
-      this.prepareTableFromDataset();
-
-      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-      if (storedOrder !== null) {
-        this.state.reverseOrder = storedOrder.reverse;
-        this.state.orderBy = storedOrder.orderBy;
-      }
-
-      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      if (textFilter !== null) {
-        this.state.textFilter = textFilter;
-        this.onTextFilterChange();
-      }
-
-      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-      if (storedFilters !== null) {
-        this.filters = storedFilters;
-      }
-      if (this.filters && this.filters.state) {
-        this.filters.state.open = false;
-      }
-
-      this.paginationChanged();
-    };
-  },
-]);

app/portainer/react/views/index.ts

@@ -9,6 +9,7 @@ import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenVi
 import { EdgeComputeSettingsView } from '@/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView';
 import { withI18nSuspense } from '@/react-tools/withI18nSuspense';
 import { EdgeAutoCreateScriptView } from '@/react/portainer/environments/EdgeAutoCreateScriptView';
+import { ListView as EnvironmentsListView } from '@/react/portainer/environments/ListView';
 
 import { wizardModule } from './wizard';
 import { teamsModule } from './teams';
@@ -44,4 +45,8 @@ export const viewsModule = angular
       withUIRouter(withReactQuery(withCurrentUser(EdgeComputeSettingsView))),
       ['onSubmit', 'settings']
     )
+  )
+  .component(
+    'environmentsListView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(EnvironmentsListView))), [])
   ).name;

app/portainer/views/endpoints/endpoints.html

@@ -1,17 +0,0 @@
-<page-header title="'Environments'" breadcrumbs="['Environment management']" reload="true"> </page-header>
-
-<view-loading ng-if="$ctrl.state.loadingMessage" message="$ctrl.state.loadingMessage"></view-loading>
-
-<div class="row" ng-if="!$ctrl.state.loadingMessage">
-  <div class="col-sm-12">
-    <endpoints-datatable
-      title-text="Environments"
-      title-icon="hard-drive"
-      table-key="$ctrl.endpoints"
-      order-by="Name"
-      remove-action="$ctrl.removeAction"
-      retrieve-page="$ctrl.getPaginatedEndpoints"
-      set-loading-message="$ctr.setLoadingMessage"
-    ></endpoints-datatable>
-  </div>
-</div>

app/portainer/views/endpoints/endpoints.js

@@ -1,6 +0,0 @@
-import { EndpointsController } from './endpointsController';
-
-angular.module('portainer.app').component('endpointsView', {
-  templateUrl: './endpoints.html',
-  controller: EndpointsController,
-});

app/portainer/views/endpoints/endpointsController.js

@@ -1,70 +0,0 @@
-import { map } from 'lodash';
-import EndpointHelper from '@/portainer/helpers/endpointHelper';
-import { getEnvironments } from '@/react/portainer/environments/environment.service';
-import { confirmDelete } from '@@/modals/confirm';
-
-export class EndpointsController {
-  /* @ngInject */
-  constructor($state, $async, EndpointService, GroupService, Notifications, EndpointProvider, StateManager) {
-    Object.assign(this, {
-      $state,
-      $async,
-      EndpointService,
-      GroupService,
-      Notifications,
-      EndpointProvider,
-      StateManager,
-    });
-
-    this.state = {
-      loadingMessage: '',
-    };
-
-    this.setLoadingMessage = this.setLoadingMessage.bind(this);
-    this.getPaginatedEndpoints = this.getPaginatedEndpoints.bind(this);
-    this.removeAction = this.removeAction.bind(this);
-  }
-
-  setLoadingMessage(message) {
-    this.state.loadingMessage = message;
-  }
-
-  removeAction(endpoints) {
-    confirmDelete('This action will remove all configurations associated to your environment(s). Continue?').then((confirmed) => {
-      if (!confirmed) {
-        return;
-      }
-      return this.$async(async () => {
-        try {
-          await Promise.all(endpoints.map(({ Id }) => this.EndpointService.deleteEndpoint(Id)));
-          this.Notifications.success('Environments successfully removed', map(endpoints, 'Name').join(', '));
-        } catch (err) {
-          this.Notifications.error('Failure', err, 'Unable to remove environment');
-        }
-
-        const id = this.EndpointProvider.endpointID();
-        // If the current endpoint was deleted, then clean endpoint store
-        if (endpoints.some((e) => e.Id === id)) {
-          this.StateManager.cleanEndpoint();
-        }
-
-        this.$state.reload();
-      });
-    });
-  }
-
-  getPaginatedEndpoints(start, limit, search) {
-    return this.$async(async () => {
-      try {
-        const [{ value: endpoints, totalCount }, groups] = await Promise.all([
-          getEnvironments({ start, limit, query: { search, excludeSnapshots: true } }),
-          this.GroupService.groups(),
-        ]);
-        EndpointHelper.mapGroupNameToEndpoint(endpoints, groups);
-        return { endpoints, totalCount };
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
-      }
-    });
-  }
-}

app/react-tools/test-mocks.ts

@@ -116,5 +116,9 @@ export function createMockEnvironment(): Environment {
       EndTime: '',
       StartTime: '',
     },
+    StatusMessage: {
+      Detail: '',
+      Summary: '',
+    },
   };
 }

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx

@@ -126,7 +126,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
       pageLimit,
       ...queryWithSort,
     },
-    refetchIfAnyOffline
+    { refetchInterval: refetchIfAnyOffline }
   );
 
   useEffect(() => {

app/react/portainer/environments/ListView/EnvironmentsDatatable.tsx

@@ -0,0 +1,104 @@
+import { HardDrive, Plus, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+
+import { useEnvironmentList } from '@/react/portainer/environments/queries';
+import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { isBE } from '../../feature-flags/feature-flags.service';
+import { refetchIfAnyOffline } from '../queries/useEnvironmentList';
+
+import { columns } from './columns';
+import { EnvironmentListItem } from './types';
+import { ImportFdoDeviceButton } from './ImportFdoDeviceButton';
+
+const tableKey = 'environments';
+const settingsStore = createPersistedStore(tableKey, 'Name');
+
+export function EnvironmentsDatatable({
+  onRemove,
+}: {
+  onRemove: (environments: Array<EnvironmentListItem>) => void;
+}) {
+  const tableState = useTableState(settingsStore, tableKey);
+
+  const [page, setPage] = useState(0);
+
+  const groupsQuery = useGroups();
+  const { environments, isLoading, totalCount } = useEnvironmentList(
+    {
+      search: tableState.search,
+      excludeSnapshots: true,
+      page: page + 1,
+      pageLimit: tableState.pageSize,
+      sort: tableState.sortBy.id,
+      order: tableState.sortBy.desc ? 'desc' : 'asc',
+    },
+    { enabled: groupsQuery.isSuccess, refetchInterval: refetchIfAnyOffline }
+  );
+
+  const environmentsWithGroups = environments.map<EnvironmentListItem>(
+    (env) => {
+      const groupId = env.GroupId;
+      const group = groupsQuery.data?.find((g) => g.Id === groupId);
+      return {
+        ...env,
+        GroupName: group?.Name,
+      };
+    }
+  );
+
+  return (
+    <Datatable
+      title="Environments"
+      titleIcon={HardDrive}
+      dataset={environmentsWithGroups}
+      columns={columns}
+      settingsManager={tableState}
+      pageCount={Math.ceil(totalCount / tableState.pageSize)}
+      onPageChange={setPage}
+      isLoading={isLoading}
+      totalCount={totalCount}
+      renderTableActions={(selectedRows) => (
+        <div className="flex items-center gap-2">
+          <Button
+            color="dangerlight"
+            disabled={selectedRows.length === 0}
+            onClick={() => onRemove(selectedRows)}
+            icon={Trash2}
+            className="!m-0"
+          >
+            Remove
+          </Button>
+
+          <ImportFdoDeviceButton />
+
+          {isBE && (
+            <Button
+              as={Link}
+              color="secondary"
+              icon={Plus}
+              props={{ to: 'portainer.endpoints.edgeAutoCreateScript' }}
+            >
+              Auto onboarding
+            </Button>
+          )}
+
+          <Button
+            as={Link}
+            props={{ to: 'portainer.environments.new' }}
+            icon={Plus}
+            className="!m-0"
+          >
+            Add environment
+          </Button>
+        </div>
+      )}
+    />
+  );
+}

app/react/portainer/environments/ListView/ListView.tsx

@@ -0,0 +1,58 @@
+import { useStore } from 'zustand';
+import _ from 'lodash';
+
+import { environmentStore } from '@/react/hooks/current-environment-store';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { PageHeader } from '@@/PageHeader';
+import { confirmDelete } from '@@/modals/confirm';
+
+import { Environment } from '../types';
+
+import { EnvironmentsDatatable } from './EnvironmentsDatatable';
+import { useDeleteEnvironmentsMutation } from './useDeleteEnvironmentsMutation';
+
+export function ListView() {
+  const constCurrentEnvironmentStore = useStore(environmentStore);
+  const deletionMutation = useDeleteEnvironmentsMutation();
+
+  return (
+    <>
+      <PageHeader
+        title="Environments"
+        breadcrumbs="Environment management"
+        reload
+      />
+
+      <EnvironmentsDatatable onRemove={handleRemove} />
+    </>
+  );
+
+  async function handleRemove(environments: Array<Environment>) {
+    const confirmed = await confirmDelete(
+      'This action will remove all configurations associated to your environment(s). Continue?'
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    const id = constCurrentEnvironmentStore.environmentId;
+    // If the current endpoint was deleted, then clean endpoint store
+    if (environments.some((e) => e.Id === id)) {
+      constCurrentEnvironmentStore.clear();
+    }
+
+    deletionMutation.mutate(
+      environments.map((e) => e.Id),
+      {
+        onSuccess() {
+          notifySuccess(
+            'Environments successfully removed',
+            _.map(environments, 'Name').join(', ')
+          );
+        },
+      }
+    );
+  }
+}

app/react/portainer/environments/ListView/columns/actions.tsx

@@ -0,0 +1,41 @@
+import { CellContext } from '@tanstack/react-table';
+import { Users } from 'lucide-react';
+
+import { EnvironmentStatus } from '@/react/portainer/environments/types';
+
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+
+import { EnvironmentListItem } from '../types';
+
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.display({
+  header: 'Actions',
+  cell: Cell,
+});
+
+function Cell({
+  row: { original: environment },
+}: CellContext<EnvironmentListItem, unknown>) {
+  if (
+    environment.Status === EnvironmentStatus.Provisioning ||
+    environment.Status === EnvironmentStatus.Error
+  ) {
+    return <>-</>;
+  }
+
+  return (
+    <Button
+      as={Link}
+      props={{
+        to: 'portainer.endpoints.endpoint.access',
+        params: { id: environment.Id },
+      }}
+      color="link"
+      icon={Users}
+    >
+      Manage access
+    </Button>
+  );
+}

app/react/portainer/environments/ListView/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { EnvironmentListItem } from '../types';
+
+export const columnHelper = createColumnHelper<EnvironmentListItem>();

app/react/portainer/environments/ListView/columns/index.ts

@@ -0,0 +1,15 @@
+import { actions } from './actions';
+import { columnHelper } from './helper';
+import { name } from './name';
+import { type } from './type';
+import { url } from './url';
+
+export const columns = [
+  name,
+  type,
+  url,
+  columnHelper.accessor('GroupName', {
+    header: 'Group Name',
+  }),
+  actions,
+];

app/react/portainer/environments/ListView/columns/name.tsx

@@ -0,0 +1,21 @@
+import { EnvironmentStatus } from '@/react/portainer/environments/types';
+
+import { Link } from '@@/Link';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Name', {
+  header: 'Name',
+  cell: ({ getValue, row: { original: environment } }) => {
+    const name = getValue();
+    if (environment.Status === EnvironmentStatus.Provisioning) {
+      return name;
+    }
+
+    return (
+      <Link to="portainer.endpoints.endpoint" params={{ id: environment.Id }}>
+        {name}
+      </Link>
+    );
+  },
+});

app/react/portainer/environments/ListView/columns/type.tsx

@@ -0,0 +1,28 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { environmentTypeIcon } from '@/portainer/filters/filters';
+import {
+  Environment,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
+import { getPlatformTypeName } from '@/react/portainer/environments/utils';
+
+import { Icon } from '@@/Icon';
+
+import { columnHelper } from './helper';
+
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
+  cell: Cell,
+});
+
+function Cell({ getValue }: CellContext<Environment, EnvironmentType>) {
+  const type = getValue();
+
+  return (
+    <span className="flex items-center gap-1">
+      <Icon icon={environmentTypeIcon(type)} />
+      {getPlatformTypeName(type)}
+    </span>
+  );
+}

app/react/portainer/environments/ListView/columns/url.tsx

@@ -0,0 +1,116 @@
+import { CellContext } from '@tanstack/react-table';
+import { AlertCircle, HelpCircle, Settings } from 'lucide-react';
+
+import {
+  EnvironmentStatus,
+  EnvironmentStatusMessage,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+import { Button } from '@@/buttons';
+
+import { EnvironmentListItem } from '../types';
+import { useUpdateEnvironmentMutation } from '../../queries/useUpdateEnvironmentMutation';
+
+import { columnHelper } from './helper';
+
+export const url = columnHelper.accessor('URL', {
+  header: 'URL',
+  cell: Cell,
+});
+
+function Cell({
+  row: { original: environment },
+}: CellContext<EnvironmentListItem, string>) {
+  const mutation = useUpdateEnvironmentMutation();
+
+  if (
+    environment.Type !== EnvironmentType.EdgeAgentOnDocker &&
+    environment.Status !== EnvironmentStatus.Provisioning
+  ) {
+    return (
+      <>
+        {environment.URL}
+        {environment.StatusMessage.Summary &&
+          environment.StatusMessage.Detail && (
+            <div className="ml-2 inline-block">
+              <span className="text-danger vertical-center inline-flex">
+                <AlertCircle className="lucide" aria-hidden="true" />
+                <span>{environment.StatusMessage.Summary}</span>
+              </span>
+              <TooltipWithChildren
+                message={
+                  <div>
+                    {environment.StatusMessage.Detail}
+                    {environment.URL && (
+                      <div className="mt-2 text-right">
+                        <Button
+                          color="link"
+                          className="small !ml-0 p-0"
+                          onClick={handleDismissButton}
+                        >
+                          <span className="text-muted-light">
+                            Dismiss error (still visible in logs)
+                          </span>
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                }
+                position="bottom"
+              >
+                <span className="vertical-center inline-flex text-base">
+                  <HelpCircle className="lucide ml-1" aria-hidden="true" />
+                </span>
+              </TooltipWithChildren>
+            </div>
+          )}
+      </>
+    );
+  }
+
+  if (environment.Type === 4) {
+    return <>-</>;
+  }
+
+  if (environment.Status === 3) {
+    const status = (
+      <span className="vertical-center inline-flex text-base">
+        <Settings className="lucide animate-spin-slow" />
+        {environment.StatusMessage.Summary}
+      </span>
+    );
+    if (!environment.StatusMessage.Detail) {
+      return status;
+    }
+    return (
+      <TooltipWithChildren
+        message={environment.StatusMessage.Detail}
+        position="bottom"
+      >
+        {status}
+      </TooltipWithChildren>
+    );
+  }
+
+  return <>-</>;
+
+  function handleDismissButton() {
+    mutation.mutate(
+      {
+        id: environment.Id,
+        payload: {
+          IsSetStatusMessage: true,
+          StatusMessage: {} as EnvironmentStatusMessage,
+        },
+      },
+      {
+        onSuccess: () => {
+          notifySuccess('Success', 'Error dismissed successfully');
+        },
+      }
+    );
+  }
+}

app/react/portainer/environments/ListView/index.ts

@@ -0,0 +1 @@
+export { ListView } from './ListView';

app/react/portainer/environments/ListView/types.ts

@@ -0,0 +1,5 @@
+import { Environment } from '@/react/portainer/environments/types';
+
+export type EnvironmentListItem = {
+  GroupName?: string;
+} & Environment;

app/react/portainer/environments/ListView/useDeleteEnvironmentsMutation.ts

@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import {
+  mutationOptions,
+  withError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+
+import { buildUrl } from '../environment.service/utils';
+import { EnvironmentId } from '../types';
+
+export function useDeleteEnvironmentsMutation() {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (environments: EnvironmentId[]) =>
+      promiseSequence(
+        environments.map(
+          (environmentId) => () => deleteEnvironment(environmentId)
+        )
+      ),
+    mutationOptions(
+      withError('Unable to delete environment(s)'),
+      withInvalidate(queryClient, [['environments']])
+    )
+  );
+}
+
+async function deleteEnvironment(id: EnvironmentId) {
+  try {
+    await axios.delete(buildUrl(id));
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Unable to delete environment');
+  }
+}

app/react/portainer/environments/queries/useEnvironmentList.ts

@@ -39,12 +39,18 @@ export function refetchIfAnyOffline(data?: GetEndpointsResponse) {
 
 export function useEnvironmentList(
   { page = 1, pageLimit = 100, sort, order, ...query }: Query = {},
+  {
+    enabled,
+    refetchInterval,
+    staleTime,
+  }: {
     refetchInterval?:
       | number
       | false
-    | ((data?: GetEndpointsResponse) => false | number),
+      | ((data?: GetEndpointsResponse) => false | number);
-  staleTime = 0,
+    staleTime?: number;
-  enabled = true
+    enabled?: boolean;
+  } = {}
 ) {
   const { isLoading, data } = useQuery(
     [

app/react/portainer/environments/queries/useUpdateEnvironmentMutation.ts

@@ -1,21 +1,23 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useQueryClient, useMutation } from 'react-query';
 
+import { withError, withInvalidate } from '@/react-tools/react-query';
+import {
+  EnvironmentId,
+  EnvironmentStatusMessage,
+  Environment,
+} from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { TagId } from '@/portainer/tags/types';
-import { withError } from '@/react-tools/react-query';
 
 import { EnvironmentGroupId } from '../environment-groups/types';
 import { buildUrl } from '../environment.service/utils';
-import { EnvironmentId, Environment } from '../types';
 
 import { queryKeys } from './query-keys';
 
 export function useUpdateEnvironmentMutation() {
   const queryClient = useQueryClient();
   return useMutation(updateEnvironment, {
-    onSuccess(data, { id }) {
+    ...withInvalidate(queryClient, [queryKeys.base()]),
-      queryClient.invalidateQueries(queryKeys.item(id));
-    },
     ...withError('Unable to update environment'),
   });
 }
@@ -38,6 +40,9 @@ export interface UpdatePayload {
   AzureApplicationID: string;
   AzureTenantID: string;
   AzureAuthenticationKey: string;
+
+  IsSetStatusMessage: boolean;
+  StatusMessage: Partial<EnvironmentStatusMessage>;
 }
 
 async function updateEnvironment({

app/react/portainer/environments/types.ts

@@ -131,6 +131,10 @@ interface EndpointChangeWindow {
   StartTime: string;
   EndTime: string;
 }
+export interface EnvironmentStatusMessage {
+  Summary: string;
+  Detail: string;
+}
 
 export type Environment = {
   Agent: { Version: string };
@@ -163,6 +167,10 @@ export type Environment = {
 
   /** GitOps update change window restriction for stacks and apps */
   ChangeWindow: EndpointChangeWindow;
+  /**
+   *  A message that describes the status. Should be included for Status Provisioning or Error.
+   */
+  StatusMessage: EnvironmentStatusMessage;
 };
 
 /**

app/react/portainer/environments/update-schedules/common/useEnvironments.ts

@@ -4,9 +4,9 @@ import { EdgeTypes, EnvironmentId } from '@/react/portainer/environments/types';
 export function useEnvironments(environmentsIds: Array<EnvironmentId>) {
   const environmentsQuery = useEnvironmentList(
     { endpointIds: environmentsIds, types: EdgeTypes },
-    undefined,
+    {
-    undefined,
+      enabled: environmentsIds.length > 0,
-    environmentsIds.length > 0
+    }
   );
 
   return environmentsQuery.environments;

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.tsx

@@ -28,7 +28,8 @@ interface Props {
 export function WizardEndpointsList({ environmentIds }: Props) {
   const { environments } = useEnvironmentList(
     { endpointIds: environmentIds },
-    (environments) => {
+    {
+      refetchInterval: (environments) => {
         if (!environments) {
           return false;
         }
@@ -39,8 +40,9 @@ export function WizardEndpointsList({ environmentIds }: Props) {
 
         return ENVIRONMENTS_POLLING_INTERVAL;
       },
-    0,
+
-    environmentIds.length > 0
+      enabled: environmentIds.length > 0,
+    }
   );
 
   return (

app/react/portainer/environments/wizard/HomeView/useFetchOrCreateLocalEnvironment.ts

@@ -76,8 +76,10 @@ function useFetchLocalEnvironment() {
       pageLimit: 1,
       types: [EnvironmentType.Docker, EnvironmentType.KubernetesLocal],
     },
-    false,
+    {
-    Infinity
+      refetchInterval: false,
+      staleTime: Infinity,
+    }
   );
 
   return {