diff --git a/app/kubernetes/services/resourcePoolService.js b/app/kubernetes/services/resourcePoolService.js
index 639c44db1..d829afa0b 100644
--- a/app/kubernetes/services/resourcePoolService.js
+++ b/app/kubernetes/services/resourcePoolService.js
@@ -3,6 +3,7 @@ import _ from 'lodash-es';
import angular from 'angular';
import KubernetesResourcePoolConverter from 'Kubernetes/converters/resourcePool';
import KubernetesResourceQuotaHelper from 'Kubernetes/helpers/resourceQuotaHelper';
+import { getNamespaces } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
/* @ngInject */
export function KubernetesResourcePoolService(
@@ -11,7 +12,8 @@ export function KubernetesResourcePoolService(
KubernetesNamespaceService,
KubernetesResourceQuotaService,
KubernetesIngressService,
- KubernetesPortainerNamespaces
+ KubernetesPortainerNamespaces,
+ EndpointProvider
) {
return {
get,
@@ -37,9 +39,14 @@ export function KubernetesResourcePoolService(
// getting the quota for all namespaces is costly by default, so disable getting it by default
async function getAll({ getQuota = false }) {
- const namespaces = await KubernetesNamespaceService.get();
+ const namespaces = await getNamespaces(EndpointProvider.endpointID());
+ // there is a lot of downstream logic using the angular namespace type with a '.Status' field (not '.Status.phase'), so format the status here to match this logic
+ const namespacesFormattedStatus = namespaces.map((namespace) => ({
+ ...namespace,
+ Status: namespace.Status.phase,
+ }));
const pools = await Promise.all(
- _.map(namespaces, async (namespace) => {
+ _.map(namespacesFormattedStatus, async (namespace) => {
const name = namespace.Name;
const pool = KubernetesResourcePoolConverter.apiToResourcePool(namespace);
if (getQuota) {
diff --git a/app/kubernetes/views/deploy/deployController.js b/app/kubernetes/views/deploy/deployController.js
index 50c923d58..79549084a 100644
--- a/app/kubernetes/views/deploy/deployController.js
+++ b/app/kubernetes/views/deploy/deployController.js
@@ -6,13 +6,13 @@ import PortainerError from '@/portainer/error';
import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods, RepositoryMechanismTypes } from 'Kubernetes/models/deploy';
import { isTemplateVariablesEnabled, renderTemplate } from '@/react/portainer/custom-templates/components/utils';
import { getDeploymentOptions } from '@/react/portainer/environments/environment.service';
-import { kubernetes } from '@@/BoxSelector/common-options/deployment-methods';
-import { editor, git, customTemplate, url, helm } from '@@/BoxSelector/common-options/build-methods';
import { parseAutoUpdateResponse, transformAutoUpdateViewModel } from '@/react/portainer/gitops/AutoUpdateFieldset/utils';
import { baseStackWebhookUrl, createWebhookId } from '@/portainer/helpers/webhookHelper';
-import { confirmWebEditorDiscard } from '@@/modals/confirm';
import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
import { KUBE_STACK_NAME_VALIDATION_REGEX } from '@/react/kubernetes/DeployView/StackName/constants';
+import { confirmWebEditorDiscard } from '@@/modals/confirm';
+import { editor, git, customTemplate, url, helm } from '@@/BoxSelector/common-options/build-methods';
+import { kubernetes } from '@@/BoxSelector/common-options/deployment-methods';
class KubernetesDeployController {
/* @ngInject */
diff --git a/app/ng-constants.ts b/app/ng-constants.ts
index 527d42132..87fa45b97 100644
--- a/app/ng-constants.ts
+++ b/app/ng-constants.ts
@@ -7,7 +7,6 @@ import {
API_ENDPOINT_EDGE_GROUPS,
API_ENDPOINT_EDGE_JOBS,
API_ENDPOINT_EDGE_STACKS,
- API_ENDPOINT_EDGE_TEMPLATES,
API_ENDPOINT_ENDPOINTS,
API_ENDPOINT_ENDPOINT_GROUPS,
API_ENDPOINT_KUBERNETES,
@@ -42,7 +41,6 @@ export const constantsModule = angular
.constant('API_ENDPOINT_EDGE_GROUPS', API_ENDPOINT_EDGE_GROUPS)
.constant('API_ENDPOINT_EDGE_JOBS', API_ENDPOINT_EDGE_JOBS)
.constant('API_ENDPOINT_EDGE_STACKS', API_ENDPOINT_EDGE_STACKS)
- .constant('API_ENDPOINT_EDGE_TEMPLATES', API_ENDPOINT_EDGE_TEMPLATES)
.constant('API_ENDPOINT_ENDPOINTS', API_ENDPOINT_ENDPOINTS)
.constant('API_ENDPOINT_ENDPOINT_GROUPS', API_ENDPOINT_ENDPOINT_GROUPS)
.constant('API_ENDPOINT_KUBERNETES', API_ENDPOINT_KUBERNETES)
diff --git a/app/portainer/helpers/strings.ts b/app/portainer/helpers/strings.ts
index dc130b0e5..fb8d69bc6 100644
--- a/app/portainer/helpers/strings.ts
+++ b/app/portainer/helpers/strings.ts
@@ -1,7 +1,7 @@
-export function pluralize(val: number, word: string, plural = `${word}s`) {
- return [1, -1].includes(Number(val)) ? word : plural;
-}
-
-export function addPlural(value: number, word: string, plural = `${word}s`) {
- return `${value} ${pluralize(value, word, plural)}`;
-}
+// Re-exporting so we don't have to update one meeeeellion files that are already importing these
+// functions from here.
+export {
+ pluralize,
+ addPlural,
+ grammaticallyJoin,
+} from '@/react/common/string-utils';
diff --git a/app/react/common/string-utils.ts b/app/react/common/string-utils.ts
new file mode 100644
index 000000000..591d6de90
--- /dev/null
+++ b/app/react/common/string-utils.ts
@@ -0,0 +1,27 @@
+export function capitalize(s: string) {
+ return s.slice(0, 1).toUpperCase() + s.slice(1);
+}
+
+export function pluralize(val: number, word: string, plural = `${word}s`) {
+ return [1, -1].includes(Number(val)) ? word : plural;
+}
+
+export function addPlural(value: number, word: string, plural = `${word}s`) {
+ return `${value} ${pluralize(value, word, plural)}`;
+}
+
+/**
+ * Joins an array of strings into a grammatically correct sentence.
+ */
+export function grammaticallyJoin(
+ values: string[],
+ separator = ', ',
+ lastSeparator = ' and '
+) {
+ if (values.length === 0) return '';
+ if (values.length === 1) return values[0];
+
+ const allButLast = values.slice(0, -1);
+ const last = values[values.length - 1];
+ return `${allButLast.join(separator)}${lastSeparator}${last}`;
+}
diff --git a/app/react/components/datatables/Datatable.test.tsx b/app/react/components/datatables/Datatable.test.tsx
index 25e1ed1eb..67ff85f70 100644
--- a/app/react/components/datatables/Datatable.test.tsx
+++ b/app/react/components/datatables/Datatable.test.tsx
@@ -1,4 +1,5 @@
import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import {
createColumnHelper,
@@ -154,6 +155,84 @@ describe('Datatable', () => {
);
expect(screen.getByText('No data available')).toBeInTheDocument();
+ const selectAllCheckbox: HTMLInputElement =
+ screen.getByLabelText('Select all rows');
+ expect(selectAllCheckbox.checked).toBe(false);
+ });
+
+ it('selects/deselects only page rows when select all is clicked', () => {
+ render(
+
+ );
+
+ const selectAllCheckbox = screen.getByLabelText('Select all rows');
+ fireEvent.click(selectAllCheckbox);
+
+ // Check if all rows on the page are selected
+ expect(screen.getByText('2 items selected')).toBeInTheDocument();
+
+ // Deselect
+ fireEvent.click(selectAllCheckbox);
+ const checkboxes: HTMLInputElement[] = screen.queryAllByRole('checkbox');
+ expect(checkboxes.filter((checkbox) => checkbox.checked).length).toBe(0);
+ });
+
+ it('selects/deselects all rows including other pages when select all is clicked with shift key', () => {
+ render(
+
+ );
+
+ const selectAllCheckbox = screen.getByLabelText('Select all rows');
+ fireEvent.click(selectAllCheckbox, { shiftKey: true });
+
+ // Check if all rows on the page are selected
+ expect(screen.getByText('3 items selected')).toBeInTheDocument();
+
+ // Deselect
+ fireEvent.click(selectAllCheckbox, { shiftKey: true });
+ const checkboxes: HTMLInputElement[] = screen.queryAllByRole('checkbox');
+ expect(checkboxes.filter((checkbox) => checkbox.checked).length).toBe(0);
+ });
+
+ it('shows indeterminate state and correct footer text when hidden rows are selected', async () => {
+ const user = userEvent.setup();
+ render(
+
+ );
+
+ // Select Jane
+ const checkboxes = screen.getAllByRole('checkbox');
+ await user.click(checkboxes[2]); // Select the second row
+
+ // Search for John (will hide selected Jane)
+ const searchInput = screen.getByPlaceholderText('Search...');
+ await user.type(searchInput, 'John');
+
+ // Check if the footer text is correct
+ expect(
+ await screen.findByText('1 item selected (1 hidden by filters)')
+ ).toBeInTheDocument();
+
+ // Check if the checkbox is indeterminate
+ const selectAllCheckbox: HTMLInputElement =
+ screen.getByLabelText('Select all rows');
+ expect(selectAllCheckbox.indeterminate).toBe(true);
+ expect(selectAllCheckbox.checked).toBe(false);
});
});
diff --git a/app/react/components/datatables/Datatable.tsx b/app/react/components/datatables/Datatable.tsx
index f845e221d..4ca608aa3 100644
--- a/app/react/components/datatables/Datatable.tsx
+++ b/app/react/components/datatables/Datatable.tsx
@@ -171,6 +171,14 @@ export function Datatable
({
const selectedRowModel = tableInstance.getSelectedRowModel();
const selectedItems = selectedRowModel.rows.map((row) => row.original);
+ const filteredItems = tableInstance
+ .getFilteredRowModel()
+ .rows.map((row) => row.original);
+
+ const hiddenSelectedItems = useMemo(
+ () => _.difference(selectedItems, filteredItems),
+ [selectedItems, filteredItems]
+ );
return (
@@ -203,6 +211,7 @@ export function Datatable({
pageSize={tableState.pagination.pageSize}
pageCount={tableInstance.getPageCount()}
totalSelected={selectedItems.length}
+ totalHiddenSelected={hiddenSelectedItems.length}
/>
);
diff --git a/app/react/components/datatables/DatatableFooter.tsx b/app/react/components/datatables/DatatableFooter.tsx
index 61e7b4dbf..0907ae260 100644
--- a/app/react/components/datatables/DatatableFooter.tsx
+++ b/app/react/components/datatables/DatatableFooter.tsx
@@ -5,6 +5,7 @@ import { SelectedRowsCount } from './SelectedRowsCount';
interface Props {
totalSelected: number;
+ totalHiddenSelected: number;
pageSize: number;
page: number;
onPageChange(page: number): void;
@@ -14,6 +15,7 @@ interface Props {
export function DatatableFooter({
totalSelected,
+ totalHiddenSelected,
pageSize,
page,
onPageChange,
@@ -22,7 +24,7 @@ export function DatatableFooter({
}: Props) {
return (
-
+
{value} item(s) selected
+ {addPlural(value, 'item')} selected
+ {hidden !== 0 && ` (${hidden} hidden by filters)`}
+
) : null;
}
diff --git a/app/react/components/datatables/select-column.tsx b/app/react/components/datatables/select-column.tsx
index 6e5b4a920..2e4a04272 100644
--- a/app/react/components/datatables/select-column.tsx
+++ b/app/react/components/datatables/select-column.tsx
@@ -1,7 +1,20 @@
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { ColumnDef, Row, Table } from '@tanstack/react-table';
import { Checkbox } from '@@/form-components/Checkbox';
+function allRowsSelected